:root {
--safemount-accent: #27AE7E;
--safemount-accent-hover: #229e71;
--safemount-bg: #f5f5f5;
--safemount-card-bg: #ffffff;
--safemount-text: #333333;
--safemount-text-secondary: #666666;
--safemount-text-muted: #555555;
--safemount-border: #dddddd;
--safemount-border-light: #eeeeee;
--safemount-input-bg: #ffffff;
--safemount-result-bg: #f0faf5;
--safemount-faq-bg: #fafafa;
--safemount-faq-hover: #f5f5f5;
--safemount-horse-item-bg: #ffffff;
} @media (prefers-color-scheme: dark) {
.safemount-calculator {
--safemount-bg: #1a1a1a;
--safemount-card-bg: #1e1e1e;
--safemount-text: #e0e0e0;
--safemount-text-secondary: #b0b0b0;
--safemount-text-muted: #a0a0a0;
--safemount-border: #3d3d3d;
--safemount-border-light: #2d2d2d;
--safemount-input-bg: #2d2d2d;
--safemount-result-bg: #1a2e24;
--safemount-faq-bg: #2d2d2d;
--safemount-faq-hover: #363636;
--safemount-horse-item-bg: #2d2d2d;
}
} html.dark-mode .safemount-calculator,
html.dark .safemount-calculator,
html[data-theme="dark"] .safemount-calculator,
body.dark-mode .safemount-calculator,
body.dark .safemount-calculator,
body[data-theme="dark"] .safemount-calculator,
.wp-dark-mode-active .safemount-calculator,
.flavor-dark .safemount-calculator,
.flavor-flavor-night .safemount-calculator,
[data-color-scheme="dark"] .safemount-calculator {
--safemount-bg: #1a1a1a;
--safemount-card-bg: #1e1e1e;
--safemount-text: #e0e0e0;
--safemount-text-secondary: #b0b0b0;
--safemount-text-muted: #a0a0a0;
--safemount-border: #3d3d3d;
--safemount-border-light: #2d2d2d;
--safemount-input-bg: #2d2d2d;
--safemount-result-bg: #1a2e24;
--safemount-faq-bg: #2d2d2d;
--safemount-faq-hover: #363636;
--safemount-horse-item-bg: #2d2d2d;
} .safemount-calculator {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
line-height: 1.6;
box-sizing: border-box;
max-width: 520px;
margin: 0 auto;
padding: 20px;
}
.safemount-calculator *,
.safemount-calculator *::before,
.safemount-calculator *::after {
box-sizing: border-box;
} .safemount-card {
background: var(--safemount-card-bg);
border-radius: 16px;
padding: 48px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
} .safemount-logo {
text-align: center;
margin-bottom: 24px;
}
.safemount-logo img {
max-width: 180px;
height: auto;
} .safemount-logo .logo-dark {
display: none;
}
@media (prefers-color-scheme: dark) {
.safemount-calculator .safemount-logo .logo-light {
display: none;
}
.safemount-calculator .safemount-logo .logo-dark {
display: inline;
}
}
html.dark-mode .safemount-calculator .safemount-logo .logo-light,
html.dark .safemount-calculator .safemount-logo .logo-light,
html[data-theme="dark"] .safemount-calculator .safemount-logo .logo-light,
body.dark-mode .safemount-calculator .safemount-logo .logo-light,
body.dark .safemount-calculator .safemount-logo .logo-light,
body[data-theme="dark"] .safemount-calculator .safemount-logo .logo-light,
.wp-dark-mode-active .safemount-calculator .safemount-logo .logo-light,
.flavor-dark .safemount-calculator .safemount-logo .logo-light,
[data-color-scheme="dark"] .safemount-calculator .safemount-logo .logo-light {
display: none;
}
html.dark-mode .safemount-calculator .safemount-logo .logo-dark,
html.dark .safemount-calculator .safemount-logo .logo-dark,
html[data-theme="dark"] .safemount-calculator .safemount-logo .logo-dark,
body.dark-mode .safemount-calculator .safemount-logo .logo-dark,
body.dark .safemount-calculator .safemount-logo .logo-dark,
body[data-theme="dark"] .safemount-calculator .safemount-logo .logo-dark,
.wp-dark-mode-active .safemount-calculator .safemount-logo .logo-dark,
.flavor-dark .safemount-calculator .safemount-logo .logo-dark,
[data-color-scheme="dark"] .safemount-calculator .safemount-logo .logo-dark {
display: inline;
} .safemount-title {
font-size: 24px;
font-weight: 700;
color: var(--safemount-text);
text-align: center;
margin: 0 0 8px 0;
}
.safemount-subtitle {
text-align: center;
color: var(--safemount-text-secondary);
font-size: 15px;
margin: 0 0 32px 0;
} .safemount-form {
margin: 0;
padding: 0;
}
.safemount-form-group {
margin-bottom: 20px;
}
.safemount-form-group label {
display: block;
font-size: 18px;
font-weight: 600;
color: var(--safemount-text);
margin-bottom: 8px;
}
.safemount-form-group input[type="number"],
.safemount-form-group select {
width: 100%;
padding: 14px 16px;
font-size: 16px;
border: 1px solid var(--safemount-border);
border-radius: 12px;
background: var(--safemount-input-bg);
color: var(--safemount-text);
transition: border-color 0.2s ease;
}
.safemount-form-group input[type="number"]:focus,
.safemount-form-group select:focus {
outline: none;
border-color: var(--safemount-accent);
}
.safemount-form-group select {
appearance: none;
padding-right: 48px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
cursor: pointer;
}
.safemount-form-group input::placeholder {
color: var(--safemount-text-secondary);
} .safemount-btn {
width: 100%;
padding: 18px;
font-size: 18px;
font-weight: 600;
color: #ffffff;
background-color: var(--safemount-accent);
border: none;
border-radius: 12px;
cursor: pointer;
transition: background-color 0.2s ease;
margin-top: 8px;
}
.safemount-btn:hover {
background-color: var(--safemount-accent-hover);
} .safemount-result {
display: none;
margin-top: 24px;
padding: 24px;
background-color: var(--safemount-result-bg);
border-radius: 12px;
text-align: center;
}
.safemount-result.show {
display: block;
}
.safemount-result-label {
font-size: 15px;
color: var(--safemount-text-secondary);
margin: 0 0 8px 0;
}
.safemount-result-value {
font-size: 42px;
font-weight: 700;
color: var(--safemount-accent);
margin: 0;
} .safemount-recommendation {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--safemount-border);
}
.safemount-recommendation h3 {
font-size: 16px;
font-weight: 600;
color: var(--safemount-text);
margin: 0 0 12px 0;
}
.safemount-horse-list {
list-style: none;
text-align: left;
margin: 0;
padding: 0;
}
.safemount-horse-list li {
padding: 8px 12px;
margin: 4px 0;
background: var(--safemount-horse-item-bg);
border-radius: 8px;
font-size: 14px;
color: var(--safemount-text);
}
.safemount-horse-list li .weight-range {
color: var(--safemount-text-secondary);
font-size: 13px;
}
.safemount-horse-list li.suitable {
border-left: 3px solid var(--safemount-accent);
}
.safemount-horse-list li.no-results {
border-left: 3px solid #e67e22;
font-style: italic;
color: var(--safemount-text-secondary);
} .safemount-faq-section {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--safemount-border-light);
}
.safemount-faq-title {
font-size: 18px;
font-weight: 700;
color: var(--safemount-text);
text-align: center;
margin: 0 0 20px 0;
}
.safemount-faq-item {
border: 1px solid var(--safemount-border-light);
border-radius: 8px;
margin-bottom: 8px;
overflow: hidden;
}
.safemount-faq-question {
width: 100%;
padding: 16px;
font-size: 15px;
font-weight: 600;
color: var(--safemount-text);
background: var(--safemount-faq-bg);
border: none;
text-align: left;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.2s ease;
font-family: inherit;
}
.safemount-faq-question:hover {
background-color: var(--safemount-faq-hover);
}
.safemount-faq-icon {
width: 18px;
height: 18px;
color: var(--safemount-accent);
flex-shrink: 0;
margin-left: 12px;
transition: transform 0.2s ease;
}
.safemount-faq-item.open .safemount-faq-icon {
transform: rotate(45deg);
}
.safemount-faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.safemount-faq-item.open .safemount-faq-answer {
max-height: 500px;
}
.safemount-faq-answer p {
padding: 16px;
font-size: 14px;
color: var(--safemount-text-muted);
line-height: 1.6;
border-top: 1px solid var(--safemount-border-light);
margin: 0;
} @media (max-width: 600px) {
.safemount-card {
padding: 32px 24px;
}
.safemount-title {
font-size: 20px;
}
.safemount-result-value {
font-size: 32px;
}
}