/**
 * Calculator-specific Styles
 * 
 * @package BraCalcPro
 */

/* ==========================================================================
   Calculator Container
   ========================================================================== */
.bracalc-calculator {
    margin: var(--space-8) 0;
}

/* ==========================================================================
   Form Error Messages
   ========================================================================== */
.form-error {
    display: none;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: rgba(229, 115, 115, 0.1);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-md);
    color: var(--color-error);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
    animation: shake 0.4s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* ==========================================================================
   Measuring Guide
   ========================================================================== */
.measure-guide {
    margin-top: var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.measure-guide__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    background: var(--color-bg-soft);
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-heading);
    transition: background var(--transition-fast);
}

.measure-guide__toggle:hover {
    background: var(--color-primary-ultra-light);
}

.measure-guide__toggle svg {
    transition: transform var(--transition-base);
}

.measure-guide__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.measure-guide__content {
    display: none;
    padding: var(--space-6);
    border-top: 1px solid var(--color-border-light);
}

.measure-step {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.measure-step:last-child {
    border-bottom: none;
}

.measure-step__number {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-sm);
    flex-shrink: 0;
}

.measure-step__content h4 {
    font-size: var(--text-base);
    margin-bottom: var(--space-2);
}

.measure-step__content p {
    font-size: var(--text-sm);
    color: var(--color-text-light);
    margin-bottom: 0;
}

.measure-step__content ul {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-text-light);
}

.measure-step__content li {
    margin-bottom: var(--space-1);
}

/* ==========================================================================
   Fit Tips
   ========================================================================== */
.fit-tips {
    background: var(--color-bg-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-top: var(--space-6);
}

.fit-tips__title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-heading);
    margin-bottom: var(--space-4);
}

.fit-tip {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.fit-tip:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.fit-tip__icon {
    font-size: var(--text-lg);
    flex-shrink: 0;
}

.fit-tip__text {
    font-size: var(--text-sm);
    color: var(--color-text-light);
    line-height: 1.5;
}

/* ==========================================================================
   Results Actions
   ========================================================================== */
.results__actions {
    margin-top: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

@media (min-width: 480px) {
    .results__actions {
        flex-direction: row;
    }
    
    .results__actions .btn {
        flex: 1;
    }
}

/* ==========================================================================
   Share Buttons
   ========================================================================== */
.share-buttons {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    margin-top: var(--space-4);
}

.share-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text-light);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.share-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-2px);
}

.share-btn--twitter:hover { color: #1DA1F2; border-color: #1DA1F2; }
.share-btn--facebook:hover { color: #4267B2; border-color: #4267B2; }
.share-btn--pinterest:hover { color: #E60023; border-color: #E60023; }

/* ==========================================================================
   Last Size Reminder
   ========================================================================== */
.last-size-reminder {
    display: none;
    background: linear-gradient(135deg, var(--color-primary-ultra-light), var(--color-secondary-light));
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
    text-align: center;
}

.last-size-reminder__text {
    font-size: var(--text-sm);
    color: var(--color-text-light);
}

.last-size-reminder .last-size {
    font-weight: 700;
    color: var(--color-heading);
}

.last-size-reminder .days-ago {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ==========================================================================
   Sister Size Enhancements
   ========================================================================== */
.sister-size {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
}

.sister-size small {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ==========================================================================
   International Sizes Grid
   ========================================================================== */
.intl-sizes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

@media (min-width: 400px) {
    .intl-sizes {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 560px) {
    .intl-sizes {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
    .site-header,
    .site-footer,
    .measure-guide,
    .results__actions,
    .share-buttons {
        display: none !important;
    }
    
    .calculator-card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    .results {
        display: block !important;
    }
    
    .results__primary {
        background: #f5f5f5 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ==========================================================================
   Plugin Tool Container
   ========================================================================== */
.bracalc-tool {
    margin: var(--space-8) 0;
}

.bracalc-tool .calculator-card {
    max-width: 100%;
}

.bracalc-tool--narrow .calculator-card {
    max-width: 500px;
    margin: 0 auto;
}

.bracalc-tool--wide .calculator-card {
    max-width: 900px;
    margin: 0 auto;
}

/* ==========================================================================
   Size Comparison Visual
   ========================================================================== */
.size-comparison {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-6) 0;
}

.size-comparison__item {
    text-align: center;
}

.size-comparison__visual {
    width: 60px;
    height: 60px;
    background: var(--color-primary-light);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    margin: 0 auto var(--space-2);
    transition: all var(--transition-base);
}

.size-comparison__item--smaller .size-comparison__visual {
    width: 50px;
    height: 50px;
    background: var(--color-border);
}

.size-comparison__item--larger .size-comparison__visual {
    width: 70px;
    height: 70px;
    background: var(--color-secondary-light);
}

.size-comparison__label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-heading);
}

.size-comparison__desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ==========================================================================
   Interactive Size Chart
   ========================================================================== */
.size-chart {
    overflow-x: auto;
    margin: var(--space-6) 0;
}

.size-chart table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.size-chart th,
.size-chart td {
    padding: var(--space-3);
    text-align: center;
    border: 1px solid var(--color-border);
}

.size-chart th {
    background: var(--color-bg-soft);
    font-weight: 600;
    color: var(--color-heading);
}

.size-chart td {
    transition: background var(--transition-fast);
}

.size-chart tr:hover td {
    background: var(--color-primary-ultra-light);
}

.size-chart td.is-highlighted {
    background: var(--color-primary-light);
    font-weight: 600;
}

.size-chart td.is-sister {
    background: var(--color-secondary-light);
}

/* ==========================================================================
   Loading States
   ========================================================================== */
.is-loading {
    position: relative;
    pointer-events: none;
}

.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Tooltip Styles
   ========================================================================== */
.tooltip {
    position: fixed;
    z-index: var(--z-tooltip);
    padding: var(--space-2) var(--space-3);
    background: var(--color-heading);
    color: white;
    font-size: var(--text-xs);
    border-radius: var(--radius-sm);
    opacity: 0;
    transform: translateY(4px);
    transition: all var(--transition-fast);
    pointer-events: none;
    white-space: nowrap;
}

.tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--color-heading);
}