/* ==============================================
100Calc Engine: Global Calculator UI Kit v1.2
==============================================
Provides default structure, layout, animations,
backward compatibility, and centered container.
*/

/* 1. CORE BRANDING, FONT STACK & CENTERING CONTAINER
--------------------------------------------- */
.c100 {
    /* Centering Container Logic */
    max-width: 720px; /* Standard width */
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem; /* Prevent touching edges on mobile */
    width: 100%; /* Take available space up to max-width */

    /* Font & Base Styles */
    font-family: var(--c100-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
    color: var(--c100-text-light, #444444);
    box-sizing: border-box;
}
.c100 *, .c100 *::before, .c100 *::after {
    box-sizing: inherit;
}

/* 2. CARD LAYOUT (New & Back-Compat)
--------------------------------------------- */
.c100 .c100-card {
    background-color: #FFFFFF;
    border: 1px solid var(--c100-border, #E0E6EA);
    border-radius: 16px;
    padding: clamp(1.5rem, 5vw, 2rem);
    margin-top: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 10px 30px -15px rgba(0, 75, 124, 0.15);
    overflow: hidden;
}

/* 3. INPUTS & FORMS (New & Back-Compat)
--------------------------------------------- */
.c100 .c100-inputs,
.c100 .c100-form {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.c100 .c100-input-group,
.c100 .c100-field {
    display: flex;
    flex-direction: column;
}
.c100 .c100-input-group label,
.c100 .c100-label {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    color: var(--c100-text-dark, #1A1A1A);
}
/* Style select elements like inputs */
.c100 .c100-input-group input,
.c100 .c100-input,
.c100 .c100-input-group select,
.c100 select.c100-input {
    font-family: inherit;
    font-size: 1rem;
    /* ✅ Adjusted padding for better vertical fit */
    padding: 0.65rem 1rem; 
    /* ✅ Explicit line-height to ensure text isn't cut off */
    line-height: 1.5; 
    height: auto; /* Ensure height adjusts to content + padding */
    border: 1px solid var(--c100-border, #E0E6EA);
    border-radius: 8px;
    background-color: var(--c100-bg-alt, #F6F9FB);
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
    -webkit-appearance: none;
    appearance: none;
}
/* Specific styling for select dropdown arrows */
.c100 .c100-input-group select,
.c100 select.c100-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23444444'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25em 1.25em;
    padding-right: 2.5rem; /* Space for the arrow */
}

/* Ensure select focus matches input focus */
.c100 .c100-input-group select:focus,
.c100 select.c100-input:focus {
     outline: none;
     border-color: var(--c100-primary, #004B7C);
     box-shadow: 0 0 0 3px rgba(0, 75, 124, 0.1);
     background-color: #FFFFFF;
}

.c100 .c100-grid { display: grid; gap: 1.5rem; }
.c100 .c100-help {
    font-size: 0.8rem;
    color: var(--c100-text-light, #444444);
    margin-top: 0.4rem;
    opacity: 0.8;
}
@media (prefers-reduced-motion: no-preference) {
    .c100 .c100-input-group input:focus,
    .c100 .c100-input:focus {
        outline: none;
        border-color: var(--c100-primary, #004B7C);
        box-shadow: 0 0 0 3px rgba(0, 75, 124, 0.1);
        background-color: #FFFFFF;
    }
}
@media (prefers-reduced-motion: reduce) {
    .c100 .c100-input-group input:focus,
    .c100 .c100-input:focus {
        outline: 2px solid var(--c100-primary, #004B7C);
        outline-offset: 1px;
    }
}

/* 4. BUTTONS (Unchanged from v1.1)
--------------------------------------------- */
.c100 .c100-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}
.c100 .c100-button {
    flex-grow: 1;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    padding: 0.85rem 1rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: var(--c100-primary, #004B7C);
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    -webkit-appearance: none;
    appearance: none;
}
.c100 > .c100-button { width: 100%; }
.c100 .c100-button--secondary {
    background-color: var(--c100-bg-alt, #F6F9FB);
    color: var(--c100-text-dark, #1A1A1A);
    border: 1px solid var(--c100-border, #E0E6EA);
}
@media (prefers-reduced-motion: no-preference) {
    .c100 .c100-button:hover {
        background-color: var(--c100-accent, #00B47E);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px -5px rgba(0, 180, 126, 0.4);
    }
    .c100 .c100-button--secondary:hover {
        background-color: var(--c100-border, #E0E6EA);
        border-color: var(--c100-border, #E0E6EA);
        color: var(--c100-text-dark, #1A1A1A);
    }
}
@media (prefers-reduced-motion: reduce) {
    .c100 .c100-button:hover {
        background-color: var(--c100-accent, #00B47E);
    }
    .c100 .c100-button--secondary:hover {
        background-color: var(--c100-border, #E0E6EA);
    }
}

/* 5. RESULTS PANEL & ANIMATION (Unchanged from v1.1)
--------------------------------------------- */
.c100 .c100-results-panel,
.c100 .c100-result {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--c100-border, #E0E6EA);
    display: grid;
    gap: 1rem;
    overflow: hidden;
    max-height: 1000px;
    opacity: 1;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), opacity 0.3s ease-out 0.1s;
}
.c100 .c100-results--hidden {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    transition: max-height 0.5s cubic-bezier(1, 0, 1, 0), opacity 0.2s ease-in, margin-top 0.5s ease-in, padding-top 0.5s ease-in, border-top 0.5s ease-in;
}
@media (prefers-reduced-motion: reduce) {
    .c100 .c100-results-panel,
    .c100 .c100-result {
        transition: none !important;
    }
    .c100 .c100-results--hidden {
        transition: none !important;
        display: none;
    }
}
.c100 .c100-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: var(--c100-bg-alt, #F6F9FB);
    border-radius: 8px;
}
.c100 .c100-result-label {
    font-weight: 500;
    color: var(--c100-text-light, #444444);
}
.c100 .c100-result-value {
    font-weight: 700;
    font-size: clamp(1.25rem, 4vw, 1.5rem);
    color: var(--c100-primary, #004B7C);
    text-align: right;
    word-break: break-all;
}

/* 6. RESPONSIVE DESIGN (Unchanged from v1.1)
--------------------------------------------- */
@media (max-width: 640px) {
    .c100 .c100-result-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .c100 .c100-result-value {
        text-align: left;
        width: 100%;
    }
}

/* 7. UTILITIES (Optional, can be expanded)
--------------------------------------------- */
.c100 .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}