/* ======================================================
       TDR ORDERING PAGE REDESIGN
       Visual UI layer — syncs to underlying GravityForms/WooCommerce form
       ====================================================== */

    /* Only apply page-level styles to our specific products */
    .postid-3118146, .postid-5147190 {
        background: #f0f2f5;
    }

    .postid-3118146 #content.container, 
    .postid-5147190 #content.container {
        max-width: 1060px !important;
        padding-top: 8px !important;
        padding-bottom: 60px !important;
        background: transparent !important;
    }

    /* Notices alignment */
    .woocommerce-notices-wrapper { margin-bottom: 4px; }
    
    /* Clean up product layout */
    .postid-3118146 #product-3118146,
    .postid-5147190 #product-5147190 { padding: 0 !important; }

    /* ---- New UI base ---- */
    #tdr-redesign {
        font-family: 'Roboto', sans-serif;
        color: #4a4a4a;
        font-size: 14px;
    }

    /* ---- Order header ---- */
    .tdr-order-header {
        border-radius: 14px;
        padding: 22px 0px 18px;
        margin-bottom: 14px;
    }
    .tdr-order-header h1 {
        font-family: montserrat, sans-serif;
        font-size: clamp(20px, 5vw, 26px);
        font-weight: 700;
        margin: 0 0 5px;
        color: #2D4664;
    }
    .tdr-order-subtitle {
        font-size: 13.5px;
        color: #777;
        margin: 0 0 16px;
    }
    .tdr-trust-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .tdr-trust-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: #555;
        font-weight: 500;
        background: #e5e8ed;
        border-radius: 20px;
        padding: 4px 10px;
    }
    .tdr-trust-item i { color: #2D4664; font-size: 11px; }

    /* ---- Step sections ---- */
    .tdr-step {
        background: white;
        border-radius: 14px;
        padding: 20px 20px 18px;
        margin-bottom: 12px;
        box-shadow: 0 1px 6px rgba(0,0,0,0.07);
    }
    .tdr-step-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 16px;
        font-family: montserrat, sans-serif;
        font-size: 15px;
        font-weight: 700;
        color: #2D4664;
    }
    .tdr-step-num {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: #2D4664;
        color: white;
        font-size: 12px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .tdr-step-num.completed {
        background: #42ada8;
    }
    .tdr-step-optional {
        font-size: 11px;
        font-weight: 400;
        color: #999;
        margin-left: 2px;
    }

    /* ---- Card grids ---- */
    .tdr-cards {
        display: grid;
        gap: 10px;
    }
    .tdr-cards-4 { grid-template-columns: 1fr 1fr; }
    .tdr-cards-3 { grid-template-columns: 1fr 1fr 1fr; }
    @media (min-width: 560px) {
        .tdr-cards-4 { grid-template-columns: repeat(4, 1fr); }
    }
    @media (max-width: 480px) {
        .tdr-cards-3 { grid-template-columns: 1fr 1fr; }
    }

    /* ---- Choice card ---- */
    .tdr-card {
        border: 2px solid #e5e8ed;
        border-radius: 10px;
        padding: 14px 8px 12px;
        cursor: pointer;
        background: white;
        text-align: center;
        width: 100%;
        transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        color: #4a4a4a;
        outline: none;
        font-family: inherit;
    }
    .tdr-card:hover {
        border-color: #2D4664;
        box-shadow: 0 0 0 3px rgba(45,70,100,0.1);
    }
    .tdr-card.selected {
        border-color: #2D4664;
        background: #EEF3FA;
        box-shadow: 0 0 0 3px rgba(45,70,100,0.12);
    }
    .tdr-card-icon {
        font-size: 22px;
        color: #aab4c0;
        line-height: 1;
        margin-bottom: 2px;
        transition: color 0.15s;
    }
    .tdr-card.selected .tdr-card-icon { color: #2D4664; }

    .tdr-film-card { justify-content: flex-start; }
    .tdr-film-card .tdr-card-icon {
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0;
        flex-shrink: 0;
    }
    .tdr-film-card .tdr-card-icon img {
        max-height: 52px;
        width: auto;
        display: block;
    }
    .tdr-film-card .tdr-card-name {
        flex: 1;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding-bottom: 2px;
    }
    .tdr-card-name {
        font-family: montserrat, sans-serif;
        font-size: 12.5px;
        font-weight: 700;
        color: #2D4664;
        line-height: 1.25;
    }
    .tdr-card-sub {
        font-size: 11px;
        color: #999;
        line-height: 1.3;
    }
    .tdr-card-price {
        font-size: 12px;
        font-weight: 700;
        color: #555;
        margin-top: 2px;
    }
    .tdr-card.selected .tdr-card-price { color: #2D4664; }
    .tdr-badge {
        position: absolute;
        top: -8px;
        right: 6px;
        background: #c12d43;
        color: white;
        font-size: 9.5px;
        font-weight: 700;
        padding: 2px 7px;
        border-radius: 20px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-family: montserrat, sans-serif;
    }

    /* ---- Sub-section label ---- */
    .tdr-sublabel {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: #aab4c0;
        margin: 14px 0 8px;
    }

    /* ---- Print size rows ---- */
    .tdr-size-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border: 2px solid #e5e8ed;
        border-radius: 10px;
        margin-bottom: 8px;
        background: white;
        transition: border-color 0.15s;
    }
    .tdr-size-row:hover { border-color: #aab4c0; }
    .tdr-size-info { flex: 1; }
    .tdr-size-title { font-weight: 700; font-size: 13.5px; color: #2D4664; }
    .tdr-size-sub { font-size: 11.5px; color: #999; }
    .tdr-size-price { font-weight: 700; font-size: 14px; color: #555; flex-shrink: 0; }

    /* ---- Qty stepper (print sets) ---- */
    .tdr-qty-wrap {
        display: flex;
        align-items: center;
        border: 2px solid #e5e8ed;
        border-radius: 8px;
        overflow: hidden;
        flex-shrink: 0;
    }
    .tdr-qty-btn {
        background: #f4f7fb;
        border: none;
        width: 28px;
        height: 32px;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        color: #2D4664;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        padding: 0;
        outline: none;
    }
    .tdr-qty-btn:hover { background: #e5e8ed; }
    .tdr-qty-num {
        border: none;
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        width: 36px;
        height: 32px;
        background: white;
        color: #2D4664;
        outline: none;
    }
    .tdr-qty-num::-webkit-inner-spin-button,
    .tdr-qty-num::-webkit-outer-spin-button { -webkit-appearance: none; }

    /* ---- Toggle button groups (finish, border) ---- */
    .tdr-toggle-row { display: flex; gap: 8px; flex-wrap: wrap; }
    .tdr-toggle {
        border: 2px solid #e5e8ed;
        border-radius: 8px;
        padding: 8px 16px;
        cursor: pointer;
        background: white;
        font-size: 13px;
        font-weight: 600;
        color: #4a4a4a;
        transition: all 0.15s;
        outline: none;
        font-family: inherit;
    }
    .tdr-toggle:hover { border-color: #2D4664; }
    .tdr-toggle.selected {
        border-color: #2D4664;
        background: #EEF3FA;
        color: #2D4664;
    }

    /* ---- Options list ---- */
    .tdr-opt-list { list-style: none; padding: 0; margin: 0; }
    .tdr-opt-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 0;
        border-bottom: 1px solid #f2f4f7;
    }
    .tdr-opt-item:last-child { border-bottom: none; }
    .tdr-opt-item input[type="checkbox"],
    .tdr-opt-item input[type="radio"] {
        width: 17px;
        height: 17px;
        accent-color: #2D4664;
        cursor: pointer;
        flex-shrink: 0;
        margin-top: 2px;
    }
    .tdr-opt-label { flex: 1; font-size: 13.5px; cursor: pointer; line-height: 1.4; }
    .tdr-opt-label strong { display: block; color: #333; }
    .tdr-opt-add { font-weight: 700; font-size: 13px; color: #2D4664; white-space: nowrap; flex-shrink: 0; }
    .tdr-opt-indent { padding-left: 28px; }

    /* Push/pull select */
    .tdr-select {
        border: 2px solid #e5e8ed;
        border-radius: 8px;
        padding: 8px 32px 8px 12px;
        font-size: 13.5px;
        color: #4a4a4a;
        background: white;
        cursor: pointer;
        outline: none;
        max-width: 220px;
        width: 100%;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath fill='%232D4664' d='M0 0l5 7 5-7z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        font-family: inherit;
    }

    /* ---- CTA section ---- */
    .tdr-cta {
        background: #2D4664;
        border-radius: 14px;
        padding: 22px 20px;
        margin-top: 20px;
        margin-bottom: 14px;
        color: white;
        box-shadow: 0 4px 20px rgba(45,70,100,0.28);
    }
    .tdr-cta-label {
        font-family: montserrat, sans-serif;
        font-size: 14px;
        font-weight: 700;
        color: rgba(255,255,255,0.8);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 14px;
    }
    .tdr-cta-row {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 16px;
        flex-wrap: wrap;
    }
    .tdr-rolls-label { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.85); }
    .tdr-stepper {
        display: flex;
        align-items: center;
        background: rgba(255,255,255,0.15);
        border-radius: 8px;
        overflow: hidden;
        border: 2px solid rgba(255,255,255,0.25);
    }
    .tdr-stepper-btn {
        width: 36px;
        height: 40px;
        background: rgba(255,255,255,0.1);
        border: none;
        font-size: 20px;
        font-weight: 700;
        cursor: pointer;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        outline: none;
    }
    .tdr-stepper-btn:hover { background: rgba(255,255,255,0.25); }
    .tdr-stepper-num {
        width: 44px;
        height: 40px;
        text-align: center;
        border: none;
        font-size: 18px;
        font-weight: 700;
        color: white;
        background: transparent;
        outline: none;
        -moz-appearance: textfield;
    }
    .tdr-stepper-num::-webkit-inner-spin-button,
    .tdr-stepper-num::-webkit-outer-spin-button { -webkit-appearance: none; }
    .tdr-price-block {
        flex: 1;
        text-align: right;
        min-width: 100px;
    }
    .tdr-price-block { flex: 1; text-align: right; min-width: 100px; }
    .tdr-price-tag { font-size: 11px; color: rgba(255,255,255,0.6); text-transform: uppercase; margin-bottom: 2px; }
    .tdr-price-val { font-family: montserrat, sans-serif; font-size: 30px; font-weight: 700; color: white; }

    .tdr-add-btn {
        display: block;
        width: 100%;
        background: #c12d43;
        color: white;
        border: none;
        border-radius: 30px;
        padding: 15px 32px;
        font-family: montserrat, sans-serif;
        font-size: 17px;
        font-weight: 700;
        text-transform: uppercase;
        cursor: pointer;
        transition: background 0.2s;
        outline: none;
    }
    .tdr-add-btn:hover { background: #42ada8; }
    .tdr-add-btn:disabled { background: #666; cursor: not-allowed; opacity: 0.5; }
    .tdr-cta-note { font-size: 11.5px; color: rgba(255,255,255,0.55); text-align: center; margin-top: 10px; }

    /* ---- Reassurance ---- */
    .tdr-reassure {
        background: white;
        border-radius: 14px;
        padding: 18px 20px;
        box-shadow: 0 1px 6px rgba(0,0,0,0.07);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px 20px;
    }
    @media (min-width: 600px) { .tdr-reassure { grid-template-columns: 1fr 1fr 1fr; } }
    .tdr-reassure-item { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: #666; line-height: 1.4; }

    /* Cart/Checkout Metadata - Scoped to our product lines */
    .tdr-film-developing-2026-item .variation,
    .tdr-film-developing-2026-variation {
        padding-top: 10px;
        padding-left: 10px;
        margin-bottom: 20px;
    }

    /* Target specifically our labels in a more scoped way */
    .tdr-film-developing-2026-item .variation-prints,
    .tdr-film-developing-2026-item .variation-Prints,
    .tdr-film-developing-2026-item .variation-color-prints,
    .tdr-film-developing-2026-item .variation-ColorPrints,
    .tdr-film-developing-2026-item .variation-bw-prints,
    .tdr-film-developing-2026-item .variation-BWPrints,
    .tdr-film-developing-2026-item .variation-special-processing,
    .tdr-film-developing-2026-item .variation-Specialprocessing {
        margin-top: 5px !important;
        font-weight: 700 !important;
        color: #2D4664 !important;
        display: block !important;
        width: 100%;
        clear: both;
    }

    /* Ensure subsequent meta items don't have too much gap and show the line */
    .tdr-film-developing-2026-item .variation-prints + dd,
    .tdr-film-developing-2026-item .variation-Prints + dd,
    .tdr-film-developing-2026-item .variation-color-prints + dd,
    .tdr-film-developing-2026-item .variation-ColorPrints + dd,
    .tdr-film-developing-2026-item .variation-bw-prints + dd,
    .tdr-film-developing-2026-item .variation-BWPrints + dd,
    .tdr-film-developing-2026-item .variation-special-processing + dd,
    .tdr-film-developing-2026-item .variation-Specialprocessing + dd {
        margin-bottom: 6px !important;
        border-top: 1px solid #ccc !important;
    }

    /* Subtle indentation for ↳ items */
    .tdr-film-developing-2026-item dt[class*="variation-"] {
        font-size: 13px;
    }

    .tdr-film-developing-2026-item dd[class*="variation-"] p {
        margin-bottom: 4px !important;
        font-size: 13px;
        color: #4a5568;
    }

    .tdr-reassure-item i { color: #2D4664; font-size: 15px; margin-top: 1px; flex-shrink: 0; width: 16px; text-align: center; }
    .tdr-reassure-item strong { display: block; color: #333; font-size: 13px; }

    /* Desktop scaling */
    @media (min-width: 860px) {
        #tdr-redesign { font-size: 16px; }
        .tdr-step { padding: 26px 28px 24px; }
        .tdr-step-header { font-size: 17px; }
        .tdr-card-name { font-size: 14px; }
        .tdr-cta { padding: 28px 26px; }
        .tdr-price-val { font-size: 36px; }
    }
    /* Out of stock */
    .tdr-out-of-stock {
        background: #fff3cd;
        border: 2px solid #ffeeba;
        border-radius: 14px;
        padding: 16px;
        color: #856404;
        font-weight: 700;
        text-align: center;
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-family: montserrat, sans-serif;
        text-transform: uppercase;
        font-size: 13px;
    }
    .tdr-out-of-stock i { font-size: 18px; }