/**
 * Sample Request — Archatrak Theme Override (Refoundry)
 *
 * PURPOSE:
 *   Overrides plugin defaults to match Archatrak's design system.
 *   Mapped to Refoundry CSS custom properties so colors/fonts stay in sync
 *   with the theme's global styles. If Refoundry values change in the admin,
 *   this stylesheet updates automatically.
 *
 * SCOPE:
 *   Only affects [sample_add_to_cart] and [sample_cart] shortcode output.
 *   Does NOT style the cart header icon or form pages.
 *
 * REFOUNDRY VARIABLE REFERENCE (from archatrak-refoundry-options.json):
 *
 *   Colors - Primary:
 *     --fndry-color-blue:       #0f3454  (primary navy — buttons, links)
 *     --fndry-color-teal:       #087a87  (accent — hovers)
 *     --fndry-color-yellow:     #f8cd12  (highlight)
 *     --fndry-color-lightBlue:  #42afc8  (secondary accent)
 *     --fndry-color-blue40:     #0f345466  (40% opacity navy)
 *     --fndry-color-blue90:     #0f3454e6  (90% opacity navy)
 *
 *   Colors - Secondary:
 *     --fndry-color-darkBlue:   #0c2a43  (hover states for blue buttons)
 *     --fndry-color-light:      #f3f2ee  (warm background)
 *     --fndry-color-beige:      #ebe9e2  (borders, alt backgrounds)
 *     --fndry-color-lightGrey:  #d9d9d9  (borders)
 *     --fndry-color-grey:       #6d6b64  (muted text)
 *     --fndry-color-darkGrey:   #373737  (secondary text)
 *     --fndry-color-dark:       #212121  (primary text)
 *
 *   Fonts:
 *     --fndry-font-inter:    Inter (body, buttons, labels)
 *     --fndry-font-raleway:  Raleway (headings, large text)
 *
 *   Button: "Filled Button - Blue" (fndry-btn-filledButtonBlue):
 *     Background: --fndry-color-blue (#0f3454)
 *     Hover: --fndry-color-darkBlue (#0c2a43)
 *     Font: Inter, 14px, 600 weight, 0.28px kerning
 *     Padding: 9px 29px
 *     Border radius: 4px
 *     Color: white
 *
 * ENQUEUE (in theme functions.php):
 *
 *   add_action( 'wp_enqueue_scripts', function() {
 *       wp_enqueue_style(
 *           'sample-request-archatrak',
 *           get_stylesheet_directory_uri() . '/css/sample-request-archatrak.css',
 *           array( 'sample-request-css' ),
 *           '1.0.0'
 *       );
 *   }, 20 );
 *
 * NOTE ON CPT SLUG:
 *   The Refoundry config shows a custom field for "our-products" post type.
 *   Make sure Settings > Sample Request > Product CPT Slug is set to "our-products".
 *
 * ============================================================================
 */


/* ──────────────────────────────────────────────────────────────────────────────
 * PLUGIN VARIABLE OVERRIDES → REFOUNDRY VARIABLES
 *
 * Maps the plugin's --sr-* variables to Refoundry's --fndry-* variables.
 * Scoped to plugin elements only.
 * ──────────────────────────────────────────────────────────────────────────── */

.sr-add-to-cart-wrap,
.sr-cart-review {
    --sr-color-primary:       var(--fndry-color-blue);
    --sr-color-primary-hover: var(--fndry-color-darkBlue);
    --sr-color-danger:        #8b2020;
    --sr-color-danger-hover:  #6b1515;
    --sr-color-success:       var(--fndry-color-teal);
    --sr-color-disabled:      var(--fndry-color-grey);
    --sr-color-disabled-bg:   var(--fndry-color-beige);
    --sr-text-color:          var(--fndry-color-dark);
    --sr-text-muted:          var(--fndry-color-grey);
    --sr-border-color:        var(--fndry-color-lightGrey);
    --sr-bg-light:            var(--fndry-color-light);
    --sr-error-bg:            #fdf0f0;
    --sr-error-color:         #8b2020;
    --sr-error-border:        #e0b0b0;
    --sr-radius:              4px;
    --sr-thumb-size:          72px;
}

/* Toast notification — uses blue for brand consistency. */
.sr-toast-container {
    --sr-toast-bg: var(--fndry-color-blue);
    --sr-toast-color: var(--fndry-color-white);
}


/* ──────────────────────────────────────────────────────────────────────────────
 * ADD TO CART BUTTON ([sample_add_to_cart])
 *
 * Mirrors "Filled Button - Blue" (fndry-btn-filledButtonBlue):
 *   - Inter, 14px, weight 600, kerning 0.28px
 *   - Background: --fndry-color-blue
 *   - Hover: --fndry-color-darkBlue
 *   - Padding: 9px 29px
 *   - Border radius: 4px
 *   - No text-transform (Archatrak buttons are sentence case)
 * ──────────────────────────────────────────────────────────────────────────── */

.sr-add-to-cart-wrap .sr-btn {
    font-family: var(--fndry-font-inter), sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.28px;
    text-transform: none;
    padding: 9px 29px;
    border-radius: 4px;
    border-width: 2px;
    transition: all 0.25s ease;
}

/* Primary filled button — "Request a Sample" / "Update Quantity". */
.sr-add-to-cart-wrap .sr-btn-add-to-cart,
.sr-add-to-cart-wrap .sr-btn-update-cart {
    background-color: var(--fndry-color-blue);
    border-color: var(--fndry-color-blue);
    color: var(--fndry-color-white);
}

.sr-add-to-cart-wrap .sr-btn-add-to-cart:hover,
.sr-add-to-cart-wrap .sr-btn-add-to-cart:focus,
.sr-add-to-cart-wrap .sr-btn-update-cart:hover,
.sr-add-to-cart-wrap .sr-btn-update-cart:focus {
    background-color: var(--fndry-color-darkBlue);
    border-color: var(--fndry-color-darkBlue);
    color: var(--fndry-color-white);
}

/* "In your sample cart" confirmation — uses teal accent. */
.sr-add-to-cart-wrap .sr-in-cart-notice {
    font-family: var(--fndry-font-inter), sans-serif;
    font-size: 13px;
    color: var(--fndry-color-teal);
    font-weight: 500;
}

/* Quantity controls — warm neutral to match Archatrak form inputs. */
.sr-add-to-cart-wrap .sr-quantity-control {
    border: 1px solid var(--fndry-color-lightGrey);
    border-radius: 4px;
}

.sr-add-to-cart-wrap .sr-qty-btn {
    background: var(--fndry-color-light);
    color: var(--fndry-color-blue);
    width: 38px;
    height: 38px;
    font-size: 16px;
}

.sr-add-to-cart-wrap .sr-qty-btn:hover {
    background: var(--fndry-color-beige);
}

.sr-add-to-cart-wrap .sr-qty-input {
    height: 38px;
    width: 48px;
    font-family: var(--fndry-font-inter), sans-serif;
    font-size: 15px;
    color: var(--fndry-color-dark);
    border-color: var(--fndry-color-lightGrey);
}

/* Error message styling. */
.sr-add-to-cart-wrap .sr-error-message {
    font-family: var(--fndry-font-inter), sans-serif;
    font-size: 13px;
    border-radius: 4px;
}


/* ──────────────────────────────────────────────────────────────────────────────
 * CART REVIEW PAGE ([sample_cart])
 *
 * Clean, warm layout using Refoundry's neutral palette.
 * Typography uses Inter (body) and Raleway (headings) per the theme config.
 * ──────────────────────────────────────────────────────────────────────────── */

.sr-cart-review {
    max-width: 860px;
    font-family: var(--fndry-font-inter), sans-serif;
}

/* Summary line. */
.sr-cart-review .sr-cart-summary {
    font-family: var(--fndry-font-inter), sans-serif;
    font-size: 15px;
    color: var(--fndry-color-grey);
}

/* Persistence note — very subtle. */
.sr-cart-review .sr-cart-persistence-note {
    font-family: var(--fndry-font-inter), sans-serif;
    font-size: 12px;
    color: var(--fndry-color-grey);
    font-style: normal;
}

/* Table header — matches Archatrak's uppercase label style (Label - 14). */
.sr-cart-review .sr-cart-table thead th {
    font-family: var(--fndry-font-raleway), sans-serif;
    background-color: var(--fndry-color-light);
    color: var(--fndry-color-grey);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.12px;
    text-transform: uppercase;
    padding: 12px 20px;
    border-bottom: 2px solid var(--fndry-color-beige);
}

/* Table cells. */
.sr-cart-review .sr-cart-table td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--fndry-color-beige);
}

/* Subtle alternating rows. */
.sr-cart-review .sr-cart-table tbody tr:nth-child(even) td {
    background-color: var(--fndry-color-light60, #f3f2ee99);
}

/* Product title link — dark, Raleway for product names. */
.sr-cart-review .sr-cart-table td a {
    font-family: var(--fndry-font-raleway), sans-serif;
    color: var(--fndry-color-dark);
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
}

.sr-cart-review .sr-cart-table td a:hover {
    color: var(--fndry-color-blue);
    text-decoration: none;
}

/* Featured image — subtle shadow. */
.sr-cart-review .sr-cart-thumbnail {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 1px 3px var(--fndry-color-black8, rgba(0, 0, 0, 0.05));
}

.sr-cart-review .sr-cart-thumbnail-placeholder {
    width: 72px;
    height: 72px;
    background-color: var(--fndry-color-light);
    border: 1px dashed var(--fndry-color-lightGrey);
    border-radius: 4px;
}

/* Quantity controls in cart — compact. */
.sr-cart-review .sr-quantity-control-sm {
    border: 1px solid var(--fndry-color-lightGrey);
    border-radius: 4px;
}

.sr-cart-review .sr-quantity-control-sm .sr-qty-btn {
    width: 30px;
    height: 30px;
    font-size: 14px;
    background: var(--fndry-color-light);
    color: var(--fndry-color-blue);
}

.sr-cart-review .sr-quantity-control-sm .sr-qty-btn:hover {
    background: var(--fndry-color-beige);
}

.sr-cart-review .sr-quantity-control-sm .sr-qty-input {
    width: 38px;
    height: 30px;
    font-family: var(--fndry-font-inter), sans-serif;
    font-size: 13px;
    color: var(--fndry-color-dark);
    border-color: var(--fndry-color-lightGrey);
}

/* Remove button — outlined, muted. */
.sr-cart-review .sr-btn-remove {
    font-family: var(--fndry-font-inter), sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.28px;
    padding: 6px 14px;
    border-radius: 4px;
    border-color: var(--fndry-color-lightGrey);
    color: var(--fndry-color-darkGrey);
    background: transparent;
}

.sr-cart-review .sr-btn-remove:hover,
.sr-cart-review .sr-btn-remove:focus {
    background-color: #8b2020;
    border-color: #8b2020;
    color: var(--fndry-color-white);
}

/* ── Cart Actions ── */

.sr-cart-review .sr-cart-actions {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--fndry-color-beige);
}

/* Continue Browsing — text link style, matches "Learn More" pattern. */
.sr-cart-review .sr-btn-browse {
    font-family: var(--fndry-font-inter), sans-serif;
    background: transparent;
    border-color: transparent;
    color: var(--fndry-color-dark);
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    padding: 12px 4px;
}

.sr-cart-review .sr-btn-browse:hover,
.sr-cart-review .sr-btn-browse:focus {
    color: var(--fndry-color-blue);
    border-color: transparent;
}

/* Proceed button — matches "Filled Button - Blue". */
.sr-cart-review .sr-btn-proceed {
    font-family: var(--fndry-font-inter), sans-serif;
    background-color: var(--fndry-color-blue);
    border-color: var(--fndry-color-blue);
    color: var(--fndry-color-white);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.28px;
    text-transform: none;
    padding: 9px 29px;
    border-radius: 4px;
}

.sr-cart-review .sr-btn-proceed:hover,
.sr-cart-review .sr-btn-proceed:focus {
    background-color: var(--fndry-color-darkBlue);
    border-color: var(--fndry-color-darkBlue);
    color: var(--fndry-color-white);
}

/* ── Empty Cart State ── */

.sr-cart-review .sr-cart-empty {
    background: var(--fndry-color-light);
    border-radius: 4px;
    padding: 40px 24px;
}

.sr-cart-review .sr-cart-empty p {
    font-family: var(--fndry-font-inter), sans-serif;
    color: var(--fndry-color-grey);
    font-size: 15px;
}

.sr-cart-review .sr-cart-empty .sr-btn-browse {
    margin-top: 16px;
    background-color: var(--fndry-color-blue);
    border-color: var(--fndry-color-blue);
    color: var(--fndry-color-white);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.28px;
    padding: 9px 29px;
    border: 2px solid var(--fndry-color-blue);
    border-radius: 4px;
}

.sr-cart-review .sr-cart-empty .sr-btn-browse:hover {
    background-color: var(--fndry-color-darkBlue);
    border-color: var(--fndry-color-darkBlue);
}

/* ── Error Message ── */

.sr-cart-review .sr-cart-error {
    font-family: var(--fndry-font-inter), sans-serif;
    border-radius: 4px;
    font-size: 14px;
}


/* ──────────────────────────────────────────────────────────────────────────────
 * CART SUMMARY BLOCK ([sample_cart_summary])
 *
 * Read-only cart summary for embedding inside Gravity Forms.
 * Placed in a GF HTML field as: [sample_cart_summary]
 * ──────────────────────────────────────────────────────────────────────────── */

.sr-cart-summary-block {
    font-family: var(--fndry-font-inter), sans-serif;
    margin-bottom: 24px;
}

/* Header: title + "Edit Cart" link. */
.sr-summary-header {
    border-bottom-color: var(--fndry-color-beige);
    margin-bottom: 16px;
    padding-bottom: 10px;
}

.sr-summary-title {
    font-family: var(--fndry-font-raleway), sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--fndry-color-dark);
    letter-spacing: 0.36px;
}

.sr-summary-edit-link {
    font-family: var(--fndry-font-inter), sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--fndry-color-blue);
}

.sr-summary-edit-link:hover {
    color: var(--fndry-color-darkBlue);
}

/* Item rows. */
.sr-summary-item {
    border-bottom-color: var(--fndry-color-beige);
    padding: 10px 0;
}

.sr-summary-thumb {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    box-shadow: 0 1px 3px var(--fndry-color-black8, rgba(0, 0, 0, 0.05));
}

.sr-summary-thumb-placeholder {
    width: 48px;
    height: 48px;
    background-color: var(--fndry-color-light);
    border-color: var(--fndry-color-lightGrey);
    border-radius: 4px;
}

.sr-summary-item-name {
    font-family: var(--fndry-font-raleway), sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--fndry-color-dark);
}

.sr-summary-item-qty {
    font-family: var(--fndry-font-inter), sans-serif;
    font-size: 13px;
    color: var(--fndry-color-grey);
}

/* Total line. */
.sr-summary-total {
    border-top-color: var(--fndry-color-beige);
    font-family: var(--fndry-font-inter), sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--fndry-color-dark);
}

/* Empty state. */
.sr-summary-empty {
    background: var(--fndry-color-light);
    border-radius: 4px;
    font-family: var(--fndry-font-inter), sans-serif;
}

.sr-summary-empty p {
    color: var(--fndry-color-grey);
}

.sr-summary-link {
    color: var(--fndry-color-blue);
    font-family: var(--fndry-font-inter), sans-serif;
}

.sr-summary-link:hover {
    color: var(--fndry-color-darkBlue);
}


/* ──────────────────────────────────────────────────────────────────────────────
 * TOAST NOTIFICATION
 * ──────────────────────────────────────────────────────────────────────────── */

.sr-toast {
    background: var(--fndry-color-blue);
    border-radius: 4px;
    font-family: var(--fndry-font-inter), sans-serif;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 16px var(--fndry-color-blue40, rgba(15, 52, 84, 0.4));
}

.sr-toast-link {
    font-weight: 700;
    letter-spacing: 0.28px;
    font-size: 13px;
}


/* ──────────────────────────────────────────────────────────────────────────────
 * RESPONSIVE
 *
 * Three breakpoints:
 *   - 1024px: Tablet landscape adjustments
 *   - 768px:  Tablet portrait / small tablet
 *   - 600px:  Mobile (stacked layout)
 * ──────────────────────────────────────────────────────────────────────────── */

/* ── Tablet landscape (1024px and below) ── */
@media screen and (max-width: 1024px) {
    .sr-cart-review {
        max-width: 100%;
    }

    .sr-cart-review .sr-cart-thumbnail {
        width: 64px;
        height: 64px;
    }

    .sr-cart-review .sr-cart-thumbnail-placeholder {
        width: 64px;
        height: 64px;
    }
}

/* ── Tablet portrait (768px and below) ── */
@media screen and (max-width: 768px) {
    /* Increase touch targets for quantity buttons on touch devices. */
    .sr-add-to-cart-wrap .sr-qty-btn {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .sr-add-to-cart-wrap .sr-qty-input {
        width: 52px;
        height: 44px;
        font-size: 16px; /* Prevents iOS zoom on input focus. */
    }

    /* Cart table — tighten padding for tablets. */
    .sr-cart-review .sr-cart-table th,
    .sr-cart-review .sr-cart-table td {
        padding: 12px 12px;
    }

    /* Cart quantity controls — larger touch targets. */
    .sr-cart-review .sr-quantity-control-sm .sr-qty-btn {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .sr-cart-review .sr-quantity-control-sm .sr-qty-input {
        width: 42px;
        height: 36px;
        font-size: 16px; /* Prevents iOS zoom. */
    }

    /* Remove button — larger touch target. */
    .sr-cart-review .sr-btn-remove {
        padding: 8px 16px;
        font-size: 13px;
    }

    /* Cart actions — stack vertically on tablet portrait. */
    .sr-cart-review .sr-cart-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .sr-cart-review .sr-btn-proceed,
    .sr-cart-review .sr-btn-browse {
        text-align: center;
        width: 100%;
    }

    .sr-cart-review .sr-btn-browse {
        order: 2; /* Browse link below Proceed button on mobile. */
    }

    .sr-cart-review .sr-btn-proceed {
        order: 1; /* Proceed is primary action, comes first. */
    }

    /* Toast — edge-to-edge on smaller tablets. */
    .sr-toast-container {
        right: 16px;
        left: 16px;
        bottom: 16px;
    }

    .sr-toast {
        max-width: none;
    }
}

/* ── Mobile (600px and below) ── */
@media screen and (max-width: 600px) {
    /* Add-to-cart area — full width stacked. */
    .sr-add-to-cart-wrap {
        flex-direction: column;
        align-items: stretch;
    }

    .sr-add-to-cart-wrap .sr-btn {
        width: 100%;
        text-align: center;
        padding: 14px 20px; /* Taller tap target on mobile. */
    }

    .sr-add-to-cart-wrap .sr-quantity-control {
        width: 100%;
        justify-content: center;
    }

    .sr-add-to-cart-wrap .sr-in-cart-notice {
        text-align: center;
        display: block;
    }

    /* Cart table — tighter cells. */
    .sr-cart-review .sr-cart-table td {
        padding: 10px 8px;
    }

    /* Smaller thumbnails on phone. */
    .sr-cart-review .sr-cart-thumbnail {
        width: 56px;
        height: 56px;
    }

    .sr-cart-review .sr-cart-thumbnail-placeholder {
        width: 56px;
        height: 56px;
    }

    /* Product titles — allow wrapping. */
    .sr-cart-review .sr-cart-table td a {
        font-size: 14px;
        word-break: break-word;
    }

    /* Proceed button — prominent, full width. */
    .sr-cart-review .sr-btn-proceed {
        width: 100%;
        text-align: center;
        padding: 14px 20px;
    }

    /* Error messages — full width. */
    .sr-add-to-cart-wrap .sr-error-message,
    .sr-cart-review .sr-cart-error {
        font-size: 13px;
    }

    /* Toast — full width mobile. */
    .sr-toast-container {
        right: 8px;
        left: 8px;
        bottom: 8px;
    }

    .sr-toast {
        max-width: none;
        border-radius: 4px;
        font-size: 13px;
        padding: 10px 14px;
    }
}

/* ── Small phones (375px and below — iPhone SE, etc.) ── */
@media screen and (max-width: 375px) {
    .sr-cart-review .sr-cart-thumbnail {
        width: 48px;
        height: 48px;
    }

    .sr-cart-review .sr-cart-thumbnail-placeholder {
        width: 48px;
        height: 48px;
    }

    .sr-cart-review .sr-quantity-control-sm .sr-qty-btn {
        width: 32px;
        height: 32px;
    }

    .sr-cart-review .sr-quantity-control-sm .sr-qty-input {
        width: 36px;
        height: 32px;
    }
}