/*
 * ZCRAVE Quick Add to Bag Styles
 *
 * These styles support the responsive Quick Add tray and the confirmation sheet. The tray appears as a bottom sheet on mobile
 * and a centred modal on desktop. The confirmation sheet also adapts accordingly. Swatch bars, size lists and plus buttons
 * are styled to integrate seamlessly with Goya/Elementor theme design.
 */

/* plus button on product cards (Quick Add trigger) */
/*
 * Quick Add trigger button styles
 * We anchor the button in the top left corner of the product tile
 * to avoid overlap with carousel progress bars or captions. A very
 * high z-index and explicit pointer-events ensures it sits above
 * all theme overlays and is clickable.
 */
.zcv-qatb-trigger {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 10000;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #000;
    background: #fff;
    color: #000;
    font-size: 24px;
    line-height: 32px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease;
    pointer-events: auto;
}

.zcv-qatb-trigger:hover {
    transform: translateY(-2px);
}

/* swatch bar overlay on product tile (not used by default but available for future tile-level swatches) */
.zcv-swatch-bar {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 999;
    display: flex;
    gap: 6px;
    padding: 4px 6px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.zcv-swatch {
    /* Use rectangular swatches like Zara. A fixed width and height and
       square corners better showcase the colour. A very thin border
       keeps the palette tidy without overwhelming the colour. */
    width: 55px;
    height: 20px;
    border-radius: 0;
    border: 0.5px solid #ccc;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    position: relative;
}

.zcv-swatch.is-active {
    /* Highlight selected swatch with a solid border */
    border: solid 0.5px #000;
}

.zcv-swatch.is-oos {
    opacity: .5;
    cursor: not-allowed;
}

/* Quick Add tray */
#zcv-size-tray {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: none;
    pointer-events: none;
}

#zcv-size-tray.is-open {
    display: block;
    pointer-events: auto;
}

#zcv-size-tray .zcv-size-tray__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

#zcv-size-tray .zcv-size-tray__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-radius: 0;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    padding: 20px;
    /* Allow content inside the panel to scroll when it exceeds max-height.
       Without this, long size lists (e.g., 8+ sizes) would overflow and make
       the sheet appear stuck because there is no scroll container. */
    overflow-y: auto;
}

#zcv-size-tray.is-open .zcv-size-tray__panel {
    transform: translateY(0);
}

@media (min-width: 768px) {
    #zcv-size-tray .zcv-size-tray__panel {
        left: 50%;
        bottom: auto;
        top: 50%;
        transform: translate(-50%, 100%);
        max-width: 640px;
        border-radius: 12px;
    }
    #zcv-size-tray.is-open .zcv-size-tray__panel {
        transform: translate(-50%, -50%);
    }
}

.zcv-size-tray__title {
    margin: 0 0 10px;
    font-size: 10px;
    letter-spacing: 0;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
}

.zcv-size-tray__close {
    position: absolute;
    right: 5px;
    top: 0px;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: #000;
    font-size: 24px;
    cursor: pointer;
    font-weight: 100 !important;
}

.zcv-size-tray__sizes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.zcv-size-tray__sizes li {
    margin: 6px 0;
}

.zcv-size-tray__sizes button {
    width: 100%;
    /* More compact padding and thinner border for a sleeker look */
    padding: 6px;
    border: 0.5px solid #000;
    background: #fff;
    font-size: 14px;
    color: #000;
    cursor: pointer;
    text-align: center;
}

.zcv-size-tray__sizes button.is-selected {
    background: #fff !important;
    color: #000 !important;
    border: solid 0.5px #000 !important;
}

.zcv-size-tray__sizes button[disabled] {
    /* Further lighten disabled sizes and use a thinner strikethrough */
    opacity: 0.4;
    text-decoration: line-through;
    cursor: not-allowed;
}

/* Override size list button styling per design spec: no border, white background,
   5px padding and medium font weight */
.zcv-size-tray__sizes button {
    border: 0 !important;
    background: #fff !important;
    padding: 5px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.qatb__add{
    text-transform: uppercase;
    border: solid 0.5px #000;
    background: #000 !important;
    padding: 5px 15px 5px 15px;
    color: #fff !important;
    font-size: 12px;
    word-spacing: -4px;  
}

.zcv-size-tray__footer {
    margin: 20px auto 0;
    text-align: center;
}

.zcv-size-tray__footer a {
    /* Increase font size and adjust weight to mirror Zara’s size guide link.
       Provide subtle border and margin for better spacing. */
    font-size: 12px;
    font-weight: 200;
    color: #000;
    letter-spacing: 0;
    text-transform: uppercase;
    text-decoration: none;
    border-top: 0.5px solid #000;
    padding-top: 2px;
}

/*
 * Size guide (multi‑step recommender) styles
 * These styles mirror the look and feel of the Quick Add tray while
 * supporting multiple steps, form fields and a recommendation summary.
 */
#zcv-size-guide-tray {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    pointer-events: none;
}

#zcv-size-guide-tray.is-open {
    display: block;
    pointer-events: auto;
}

#zcv-size-guide-tray .zcv-size-guide__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

#zcv-size-guide-tray .zcv-size-guide__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    padding: 20px;
    /* Make panel full height on mobile */
    height: 100vh !important;
    max-height: none !important;
    overflow-y: auto !important;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

#zcv-size-guide-tray.is-open .zcv-size-guide__panel {
    transform: translateY(0);
}

@media (min-width: 768px) {
    #zcv-size-guide-tray .zcv-size-guide__panel {
        left: 50%;
        bottom: auto;
        top: 50%;
        max-width: 640px;
        border-radius: 12px;
        transform: translate(-50%, 100%);
    }
    #zcv-size-guide-tray.is-open .zcv-size-guide__panel {
        transform: translate(-50%, -50%);
    }
}

.zcv-size-guide__close {
    position: absolute;
    top: 8px;
    right: 8px;
    border: 0;
    background: transparent;
    font-size: 24px;
    cursor: pointer;
}

.zcv-size-guide__title {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
}

/*
 * Redefine size‑guide form elements to match the minimalist Zara style.
 * Use bottom borders only, larger type and refined spacing.
 */

.sg-field {
    position: relative;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
}

/* Main labels (e.g., HEIGHT, WEIGHT) */
.sg-label {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    text-transform: uppercase;
    color: #000;
}

/* Secondary labels for smaller headings (e.g., Favourite section) */
.sg-sublabel {
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 4px;
}

/* Unit toggle row, aligned to the right */
.sg-unit-toggle {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 6px;
}

.sg-unit-btn {
    background: transparent;
    border: none;
    padding: 0 4px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    color: #999;
}
.sg-unit-btn.active {
    color: #000;
    text-decoration: underline;
}

/* Display for numbers with just a bottom border */
.sg-input-display {
    padding: 12px 0;
    border-bottom: 1px solid #000;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    cursor: pointer;
}

/* Note under optional inputs */
.sg-note {
    font-size: 12px;
    color: #666;
    margin-top: 6px;
    line-height: 1.4;
}

/* Policy text on step1 */
.sg-policy {
    font-size: 11px;
    color: #555;
    margin-top: 20px;
    line-height: 1.4;
}

/* Heading block for measurement section */
.sg-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.sg-subtitle {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    color: #000;
}

.sg-meas-link {
    font-size: 12px;
    margin-top: 4px;
}
.sg-meas-link a {
    color: #000;
    text-decoration: underline;
}

/* Slider styling and labels */
.sg-slider {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.sg-fit-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-top: 6px;
}
.sg-fit-desc {
    font-size: 12px;
    margin-top: 8px;
    text-align: center;
}

/*
 * Custom value input wrapper styles.  These classes are used for
 * numeric fields (height, weight, waist, hip) where a unit label
 * appears inline with an input.  The wrapper uses a bottom border
 * identical to Zara’s inputs and ensures the unit suffix stays
 * aligned to the right.
 */
.sg-value-wrapper {
    display: flex;
    align-items: baseline;
    border-bottom: 1px solid #000;
    padding-bottom: 8px;
}

.sg-value-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 18px;
    font-weight: 500;
    color: #000;
    text-align: left;
    -moz-appearance: textfield;
}

/* remove spinners in number inputs on Chrome */
.sg-value-input::-webkit-outer-spin-button,
.sg-value-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sg-unit-span {
    margin-left: 6px;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    color: #999;
}

/* Static select style for favourite section */
.sg-select-static {
    font-size: 16px;
    font-weight: 500;
    padding: 8px 0;
    border-bottom: 1px solid #000;
    width: 100%;
    color: #000;
}

/* Footer action buttons */
.zcv-size-guide__actions {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 24px;
}

.sg-back,
.sg-next,
.sg-add,
.sg-edit,
.sg-delete,
.sg-back-arrow {
    border: 1px solid #000;
    background: #fff;
    color: #000;
    padding: 12px;
    font-size: 14px;
    text-transform: uppercase;
    cursor: pointer;
    flex: 1;
    margin: 0 4px;
    border-radius: 0;
}
.sg-add {
    background: #000;
    color: #fff;
}

.sg-back-arrow {
    border: none;
    padding: 0;
    font-size: 24px;
    line-height: 1;
    flex: none;
    margin-right: 12px;
}

/* Recommendation summary text */
.sg-result-title {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin: 20px 0 8px;
    text-transform: uppercase;
}
.sg-result-size {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 8px;
}
.sg-result-summary {
    font-size: 14px;
    text-align: center;
    margin-bottom: 6px;
}
.sg-result-fit {
    font-size: 14px;
    text-align: center;
    margin-bottom: 20px;
}
.sg-edit-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}
.sg-edit,
.sg-delete {
    border: none;
    background: none;
    font-size: 14px;
    text-transform: uppercase;
    cursor: pointer;
    color: #000;
}

/* ===============================================================
   Additional overrides inspired by the design reference
   These rules adjust thumbnails, header spacing, labels and tray
   elements to better align with the Zara style.  They rely on
   !important to ensure they override earlier definitions.  Feel
   free to refine these values further to suit your theme.
   =============================================================== */

/* Thumbnail dimensions and border removal */
.qatb__thumb {
    width: 94px !important;
    height: 116px !important;
    object-fit: cover !important;
    border: 0 !important;
}

/* Header row spacing */
.qatb__header {
    margin: 10px 0 10px !important;
    gap: 12px !important;
    align-items: center !important;
}

/* Labels for size and color rows */
.qatb__label {
    font-size: 10px !important;
    text-transform: uppercase !important;
    opacity: 1 !important;
    margin-bottom: 5px !important;
}

/* Top margin for size label to separate from header */
.qatb__row--size .qatb__label {
    margin-top: 10px !important;
}

/* Confirmation sheet */
#zcv-added-sheet {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    pointer-events: none;
}

/*
 * Override plus button styling to match the design specifications from the
 * size‑tray correction file. These rules use !important so they take
 * precedence over the earlier definitions. The button becomes a small
 * square anchored to the bottom left with a semi‑transparent white
 * background and no border.
 */
.zcv-qatb-trigger {
    left: 0 !important;
    bottom: 50px !important;
    top: auto !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: rgba(255,255,255,0.55) !important;
    color: #000 !important;
    font-size: 12px !important;
    line-height: 12px !important;
    margin: 0.625rem !important;
}

#zcv-added-sheet.is-open {
    display: block;
    pointer-events: auto;
}

#zcv-added-sheet .sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

#zcv-added-sheet .sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-radius: 0;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

#zcv-added-sheet.is-open .sheet {
    transform: translateY(0);
}

@media (min-width: 768px) {
    #zcv-added-sheet .sheet {
        left: 50%;
        right: auto;
        bottom: auto;
        top: 50%;
        transform: translate(-50%, 100%);
        border-radius: 12px;
        max-width: 640px;
    }
    #zcv-added-sheet.is-open .sheet {
        transform: translate(-50%, -50%);
    }
}

.action-sheet__bar {
    width: 40px;
    height: 4px;
    background: #c7c7c7;
    border-radius: 2px;
    margin: 10px auto;
}

.sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 0px 0px;
    margin: 15px 15px 15px 15px;
    border-bottom: solid 0.1px #000;
}

.sheet__title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.sheet__view {
    padding: 5px 0px;
    border: none;
    background: none;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
}

.added-product {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 0 16px 10px;
}

.added-product .media__wrapper--fill {
    position: relative;
    padding-bottom: 150%;
    overflow: hidden;
    border-radius: 6px;
    background: #f5f5f5;
}

.added-product img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.added-product__name {
    margin: 0 0 5px;
    font-size: 12px;
    line-height: 1.3;
}

.added-product__meta span {
    font-size: 12px;
    opacity: 0.75;
}

.recos {
    padding: 0 15px 15px;
}

.recos__title {
    font-size: 12px;
    text-transform: uppercase;
    margin: 0 0 20px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.recos__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    max-height: 42vh;
    overflow-y: auto;
}

.recos__card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.recos__thumb {
    position: relative;
    padding-bottom: 135%;
    overflow: hidden;
    border-radius: 0;
    background: #fff;
}

.recos__thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recos__meta {
    margin-top: 0;
    font-size: 10px;
    line-height: 1.3;
}