/* ============================================================
   METAL WEIGHT CALCULATOR – WordPress Plugin CSS
   metal-calculator/assets/css/metal-calculator.css
   ============================================================ */

/* Wrapper to isolate styles & prevent global conflicts in WP themes */
.wp-metal-calc-wrapper {
    /* CSS Custom Properties for dynamic customizations */
    --mc-font-family: 'Roboto', sans-serif;
    --mc-bg: linear-gradient(135deg, #0d1f3c 0%, #1a3c6e 50%, #0d1f3c 100%);
    --mc-accent-color: #e8a020;
    --mc-text-color: #ffffff;
    --mc-subtext-color: rgba(255, 255, 255, 0.6);
    
    --mc-card-bg: rgba(255, 255, 255, 0.04);
    --mc-card-border: rgba(255, 255, 255, 0.1);
    
    --mc-input-bg: rgba(255, 255, 255, 0.06);
    --mc-input-border: rgba(255, 255, 255, 0.15);
    --mc-input-focus-shadow: rgba(232, 160, 32, 0.18);
    
    --mc-dropdown-bg: #1a3c6e;
    --mc-optgroup-bg: #0d1f3c;
    
    --mc-btn-bg: linear-gradient(135deg, #e8a020, #f5c842);
    --mc-btn-text: #0d1f3c;
    --mc-btn-shadow: rgba(232, 160, 32, 0.35);
    --mc-btn-hover-shadow: rgba(232, 160, 32, 0.5);
    
    --mc-reset-border: rgba(255, 255, 255, 0.15);
    --mc-reset-text: rgba(255, 255, 255, 0.45);
    --mc-reset-hover-border: rgba(255, 255, 255, 0.3);
    --mc-reset-hover-text: rgba(255, 255, 255, 0.75);
    
    --mc-panel-bg: rgba(0, 0, 0, 0.25);
    --mc-panel-border: rgba(255, 255, 255, 0.08);

    background: var(--mc-bg) !important;
    padding: 70px 0 !important;
    position: relative !important;
    overflow: hidden !important;
    font-family: var(--mc-font-family) !important;
    box-sizing: border-box !important;
}

.wp-metal-calc-wrapper * {
    box-sizing: border-box !important;
}

.wp-metal-calc-wrapper .mc-container {
    max-width: 1170px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
}

.wp-metal-calc-wrapper .mc-deco {
    position: absolute !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.03) !important;
    pointer-events: none !important;
}
.wp-metal-calc-wrapper .mc-deco-1 { top:-80px !important; right:-80px !important; width:320px !important; height:320px !important; }
.wp-metal-calc-wrapper .mc-deco-2 { bottom:-60px !important; left:-60px !important; width:240px !important; height:240px !important; }

/* ── Section header ─────────────────────────────────────────── */
.wp-metal-calc-wrapper .mc-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
}
.wp-metal-calc-wrapper .mc-eyebrow-line {
    width: 40px !important; height: 3px !important; border-radius: 2px !important;
    background: linear-gradient(90deg, transparent, var(--mc-accent-color)) !important;
}
.wp-metal-calc-wrapper .mc-eyebrow-line.right { background: linear-gradient(90deg, var(--mc-accent-color), transparent) !important; }
.wp-metal-calc-wrapper .mc-eyebrow-text {
    color: var(--mc-accent-color) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
}
.wp-metal-calc-wrapper .mc-heading {
    color: var(--mc-text-color) !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    margin: 0 0 12px 0 !important;
    letter-spacing: -0.5px !important;
    line-height: 1.2 !important;
}
.wp-metal-calc-wrapper .mc-heading span { color: var(--mc-accent-color) !important; }
.wp-metal-calc-wrapper .mc-subhead {
    color: var(--mc-subtext-color) !important;
    font-size: 15px !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    line-height: 1.7 !important;
}

/* ── Flex Layout ────────────────────────────────────────────── */
.wp-metal-calc-wrapper .mc-flex-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
}
.wp-metal-calc-wrapper .mc-flex-left {
    flex: 1 1 55% !important;
    min-width: 300px !important;
}
.wp-metal-calc-wrapper .mc-flex-right {
    flex: 1 1 35% !important;
    min-width: 280px !important;
}

/* ── Card ───────────────────────────────────────────────────── */
.wp-metal-calc-wrapper #calc-card {
    background: var(--mc-card-bg) !important;
    border: 1px solid var(--mc-card-border) !important;
    border-radius: 16px !important;
    padding: 40px !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.4) !important;
    margin: 0 auto !important;
    max-width: 1000px !important;
}

/* ── Form controls ──────────────────────────────────────────── */
.wp-metal-calc-wrapper .calc-label {
    display: block !important;
    color: var(--mc-subtext-color) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    margin-bottom: 7px !important;
}
.wp-metal-calc-wrapper .calc-select,
.wp-metal-calc-wrapper .calc-input {
    width: 100% !important;
    padding: 11px 14px !important;
    background: var(--mc-input-bg) !important;
    border: 1px solid var(--mc-input-border) !important;
    border-radius: 8px !important;
    color: var(--mc-text-color) !important;
    font-size: 14px !important;
    outline: none !important;
    transition: border-color 0.25s, box-shadow 0.25s !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    height: auto !important;
    line-height: normal !important;
}
.wp-metal-calc-wrapper .calc-select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px !important;
    padding-right: 40px !important;
}
.wp-metal-calc-wrapper .calc-select option { background: var(--mc-dropdown-bg); color: #ffffff; }
.wp-metal-calc-wrapper .calc-select:focus,
.wp-metal-calc-wrapper .calc-input:focus {
    border-color: var(--mc-accent-color) !important;
    box-shadow: 0 0 0 3px var(--mc-input-focus-shadow) !important;
}
.wp-metal-calc-wrapper .calc-input::placeholder { color: rgba(255,255,255,0.3) !important; }
.wp-metal-calc-wrapper .calc-input::-webkit-outer-spin-button,
.wp-metal-calc-wrapper .calc-input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; }

/* optgroup styling for grouped dropdown */
.wp-metal-calc-wrapper .calc-select optgroup {
    font-style: normal !important;
    font-weight: 700 !important;
    color: var(--mc-accent-color) !important;
    background: var(--mc-optgroup-bg) !important;
}
.wp-metal-calc-wrapper .calc-select optgroup option {
    font-weight: 400 !important;
    color: #ffffff;
    padding-left: 8px !important;
}

/* Grid helper for inputs */
.wp-metal-calc-wrapper .mc-field-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin-bottom: 22px !important;
}
.wp-metal-calc-wrapper .mc-field-row .mc-col {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 140px !important;
}

/* ── Buttons ────────────────────────────────────────────────── */
.wp-metal-calc-wrapper #calc-btn {
    width: 100% !important;
    padding: 16px !important;
    background: var(--mc-btn-bg) !important;
    color: var(--mc-btn-text) !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 6px 20px var(--mc-btn-shadow) !important;
}
.wp-metal-calc-wrapper #calc-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px var(--mc-btn-hover-shadow) !important;
}
.wp-metal-calc-wrapper #calc-reset {
    width: 100% !important;
    padding: 10px !important;
    background: transparent !important;
    color: var(--mc-reset-text) !important;
    border: 1px solid var(--mc-reset-border) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    cursor: pointer !important;
    margin-top: 10px !important;
    transition: all 0.25s ease !important;
}
.wp-metal-calc-wrapper #calc-reset:hover { color: var(--mc-reset-hover-text) !important; border-color: var(--mc-reset-hover-border) !important; }

/* ── Result panel ───────────────────────────────────────────── */
.wp-metal-calc-wrapper #calc-result-panel {
    background: var(--mc-panel-bg) !important;
    border: 1px solid var(--mc-panel-border) !important;
    border-radius: 14px !important;
    padding: 30px !important;
    height: 100% !important;
    min-height: 340px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}
.wp-metal-calc-wrapper #calc-idle { text-align: center !important; }
.wp-metal-calc-wrapper .calc-idle-icon {
    width: 70px !important; height: 70px !important;
    border-radius: 50% !important;
    background: rgba(232,160,32,0.1) !important;
    border: 2px dashed rgba(232,160,32,0.35) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
}
.wp-metal-calc-wrapper .calc-idle-icon i { font-size: 28px !important; color: rgba(232,160,32,0.6) !important; }
.wp-metal-calc-wrapper .calc-idle-text {
    color: var(--mc-subtext-color) !important;
    font-size: 14px !important;
    margin: 0 !important;
}
.wp-metal-calc-wrapper #calc-result { display: none; text-align: center !important; }
.wp-metal-calc-wrapper #calc-result-label {
    color: var(--mc-subtext-color) !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
}
.wp-metal-calc-wrapper #calc-kg {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: var(--mc-accent-color) !important;
    line-height: 1.2 !important;
    word-wrap: break-word !important;
    word-break: break-all !important;
    margin-bottom: 4px !important;
}
.wp-metal-calc-wrapper .calc-unit-label {
    color: var(--mc-subtext-color) !important;
    font-size: 13px !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}
.wp-metal-calc-wrapper .calc-lbs-divider {
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    padding-top: 14px !important;
    margin-bottom: 16px !important;
}
.wp-metal-calc-wrapper #calc-lbs {
    font-size: 22px !important;
    font-weight: 600 !important;
    color: var(--mc-text-color) !important;
    line-height: 1.2 !important;
    word-wrap: break-word !important;
    word-break: break-all !important;
    margin-bottom: 4px !important;
}
.wp-metal-calc-wrapper .calc-stats-strip {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}
.wp-metal-calc-wrapper .calc-stat-box {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    min-width: 80px !important;
    text-align: center !important;
}
.wp-metal-calc-wrapper .calc-stat-val {
    color: var(--mc-accent-color) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}
.wp-metal-calc-wrapper .calc-stat-lbl {
    color: var(--mc-subtext-color) !important;
    font-size: 10px !important;
    margin-top: 4px !important;
    letter-spacing: 0.5px !important;
}
.wp-metal-calc-wrapper #calc-formula-note {
    margin-top: 18px !important;
    padding: 10px 14px !important;
    background: rgba(255,255,255,0.04) !important;
    border-radius: 8px !important;
    color: var(--mc-subtext-color) !important;
    font-size: 11px !important;
    line-height: 1.6 !important;
    text-align: left !important;
}

/* ── Density reference strip ────────────────────────────────── */
.wp-metal-calc-wrapper .mc-density-strip {
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    padding-top: 28px !important;
    margin-top: 36px !important;
}
.wp-metal-calc-wrapper .mc-density-title {
    color: var(--mc-subtext-color) !important;
    font-size: 14px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin-bottom: 16px !important;
    font-weight: 600 !important;
}
.wp-metal-calc-wrapper .mc-tags-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}
.wp-metal-calc-wrapper .density-tag {
    display: inline-block !important;
    padding: 5px 12px !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 20px !important;
    color: var(--mc-subtext-color) !important;
    font-size: 12px !important;
}

/* ── Animation ───────────────────────────────────────────────── */
@keyframes calcPop {
    0%   { opacity:0; transform:scale(0.85) translateY(10px); }
    60%  { transform:scale(1.04) translateY(-2px); }
    100% { opacity:1; transform:scale(1) translateY(0); }
}
.wp-metal-calc-wrapper .calc-pop { animation: calcPop 0.45s cubic-bezier(.4,0,.2,1) forwards !important; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 991px) {
    .wp-metal-calc-wrapper #calc-card { padding: 24px !important; }
    .wp-metal-calc-wrapper .mc-heading { font-size: 28px !important; }
}
@media (max-width: 767px) {
    .wp-metal-calc-wrapper .mc-flex-container { flex-direction: column !important; }
    .wp-metal-calc-wrapper #calc-result-panel { min-height: auto !important; margin-top: 24px !important; }
    .wp-metal-calc-wrapper #calc-kg { font-size: 32px !important; }
    .wp-metal-calc-wrapper { padding: 40px 0 !important; }
}
@media (max-width: 600px) {
    .wp-metal-calc-wrapper #calc-card { padding: 20px 16px !important; }
    .wp-metal-calc-wrapper .mc-field-row .mc-col { flex: 1 1 100% !important; }
    .wp-metal-calc-wrapper .mc-heading { font-size: 24px !important; }
    .wp-metal-calc-wrapper .mc-subhead { font-size: 13px !important; }
    .wp-metal-calc-wrapper .mc-full-page-btn { padding: 12px 24px !important; font-size: 14px !important; width: 100% !important; max-width: 320px !important; text-align: center !important; }
}

/* ── View Full Calculator Page Button ────────────────────────── */
.wp-metal-calc-wrapper .mc-full-page-btn-row {
    width: 100% !important;
    text-align: center !important;
    margin-top: 35px !important;
}
.wp-metal-calc-wrapper .mc-full-page-btn {
    display: inline-block !important;
    padding: 14px 36px !important;
    background: transparent !important;
    color: var(--mc-accent-color) !important;
    border: 2px solid var(--mc-accent-color) !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}
.wp-metal-calc-wrapper .mc-full-page-btn:hover {
    background: var(--mc-accent-color) !important;
    color: var(--mc-btn-text) !important;
    box-shadow: 0 0 20px var(--mc-btn-hover-shadow) !important;
    transform: translateY(-2px) !important;
}