/* =============================================
   Codlion Shared Checkout — Customer fields, order summary,
   submit button, messages
   Used by: Cod Form 1 (inline), Cod Form 2 (popup), Cart Panel
   Loaded globally (cart panel requires it)
   ============================================= */

/* ---- Customer fields container ---- */
.cl-cod1-customer-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 11px;
}

/* ---- Icon fields (wrapper div with ::before pseudo-element) ---- */
.cl-cod1-field-icon {
    position: relative;
    display: flex;
    align-items: stretch;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.2s ease;
}

.cl-cod1-field-icon::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 46px;
    background-color: rgba(var(--cod-accent-rgb, 22, 163, 74), 0.08);
    border: 1px solid var(--cod-input-border, var(--cl-border, #d1d5db));
    border-right: none;
    border-radius: 12px 0 0 12px;
    pointer-events: none;
    z-index: 1;
}

.cl-cod1-field-icon::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 46px;
    background-color: var(--cod-accent, #16a34a);
    pointer-events: none;
    z-index: 2;
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z'/></svg>");
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 18px 18px;
    mask-size: 18px 18px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.cl-cod1-field-icon-phone::after {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z'/></svg>");
}

.cl-cod1-field-icon-city::after {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z'/></svg>");
}

.cl-cod1-field-icon-state::after {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z'/></svg>");
}

.cl-cod1-field-icon-email::after {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z'/></svg>");
}

.cl-cod1-field-icon-home::after {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'><path d='M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112-.09a16 16 0 0 0 16-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v96a16 16 0 0 0 16 16l112 .09a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.49 43.48a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'><path d='M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112-.09a16 16 0 0 0 16-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v96a16 16 0 0 0 16 16l112 .09a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.49 43.48a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z'/></svg>");
}

.cl-cod1-field-icon input[type="text"],
.cl-cod1-field-icon input[type="tel"],
.cl-cod1-field-icon input[type="email"],
.cl-cod1-field-icon select {
    padding: 10px 14px;
    padding-left: 54px;
    border: 1px solid var(--cod-input-border, var(--cl-border, #d1d5db));
    border-radius: 0 12px 12px 0;
    font-size: 14.5px;
    font-family: inherit;
    background: var(--cod-input-bg, var(--cl-surface, #fff));
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
    box-sizing: border-box;
    height: 44px;
}

.cl-cod1-field-icon select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239aa0a6' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.cl-cod1-field-icon input::placeholder,
.cl-cod1-field-icon select {
    color: var(--cl-placeholder, #9aa0a6);
}

.cl-cod1-field-icon input:focus,
.cl-cod1-field-icon select:focus {
    border-color: var(--cod-accent, var(--cl-success, #16a34a));
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--cod-accent-rgb, 22, 163, 74), 0.12);
}

.cl-cod1-field-icon:focus-within::before {
    border-color: var(--cod-accent, var(--cl-success, #16a34a));
    box-shadow: -3px 0 0 3px rgba(var(--cod-accent-rgb, 22, 163, 74), 0.12);
}

.cl-cod1-field-icon:focus-within::after {
    background-color: var(--cod-accent, var(--cl-success, #16a34a));
}

.cl-cod1-field-icon:focus-within {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* ---- RTL overrides for icon fields ---- */
.rtl-mode .cl-cod1-field-icon::before {
    left: auto;
    right: 0;
    border-right: 1px solid var(--cod-input-border, var(--cl-border, #d1d5db));
    border-left: none;
    border-radius: 0 12px 12px 0;
}

.rtl-mode .cl-cod1-field-icon::after {
    left: auto;
    right: 0;
}

.rtl-mode .cl-cod1-field-icon input[type="text"],
.rtl-mode .cl-cod1-field-icon input[type="tel"],
.rtl-mode .cl-cod1-field-icon input[type="email"],
.rtl-mode .cl-cod1-field-icon select {
    padding-left: 14px;
    padding-right: 54px;
    border-radius: 12px 0 0 12px;
}

.rtl-mode .cl-cod1-field-icon select {
    background-position: left 12px center;
    padding-left: 32px;
}

.rtl-mode .cl-cod1-field-icon:focus-within::before {
    box-shadow: 3px 0 0 3px rgba(var(--cod-accent-rgb, 22, 163, 74), 0.12);
}

/* ---- CL Search Select dropdown overrides (city + state) ---- */
/* Base cl-search-select.css now uses COD form CSS variables, so only
   layout overrides are needed here (icon wrapper padding, positioning). */
.cl-cod1-field-icon-city .cl-search-select,
.cl-cod1-field-icon-state .cl-search-select {
    flex: 1;
    height: 44px;
    border-radius: 0 12px 12px 0;
    padding-left: 54px;
    padding-right: 32px;
    font-size: 14.5px;
    line-height: 36px;
    appearance: none;
}

.cl-cod1-field-icon-city .cl-search-select .cl-search-select__rendered,
.cl-cod1-field-icon-state .cl-search-select .cl-search-select__rendered {
    color: var(--cl-text-secondary, #374151);
}

.cl-cod1-field-icon-city .cl-search-select .cl-search-select__placeholder,
.cl-cod1-field-icon-state .cl-search-select .cl-search-select__placeholder {
    color: var(--cl-placeholder, #9aa0a6);
}

.cl-cod1-field-icon-city .cl-search-select__arrow,
.cl-cod1-field-icon-state .cl-search-select__arrow {
    right: 10px;
}

.cl-cod1-field-icon-city .cl-search-select__clear,
.cl-cod1-field-icon-state .cl-search-select__clear {
    right: 28px;
}

.cl-search-select__dropdown {
    border-radius: 10px;
}

/* RTL city + state dropdown */
.rtl-mode .cl-cod1-field-icon-city .cl-search-select,
.rtl-mode .cl-cod1-field-icon-state .cl-search-select {
    padding-left: 32px;
    padding-right: 54px;
    border-radius: 12px 0 0 12px;
}

.rtl-mode .cl-cod1-field-icon-city .cl-search-select__arrow,
.rtl-mode .cl-cod1-field-icon-state .cl-search-select__arrow {
    right: auto;
    left: 10px;
}

/* ---- Order summary ---- */
.cl-cod1-summary {
    background: var(--cl-surface-muted, #f9fafb);
    border: 1px solid var(--cl-border, #e5e7eb);
    border-radius: 14px;
    padding: 9px 11px;
    margin: 0 11px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.cl-cod1-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 13.5px;
    color: var(--cl-text-secondary, #374151);
}

.cl-cod1-summary-divider {
    border-top: 1px solid var(--cl-border, #e5e7eb);
    margin: 6px 0;
}

.cl-cod1-discount-row span:last-child {
    color: var(--cl-danger, #dc2626);
    font-weight: 600;
}

.cl-shipping-pending {
    color: var(--cl-text-muted, #6b7280);
    font-style: italic;
    font-size: 13px;
}

.cl-cod1-summary-total {
    font-weight: 800;
    font-size: 19px;
    color: var(--cod-price-color, var(--cl-success-dark, #065f46));
}

/* ---- Submit button ---- */
.cl-cod1-submit-btn {
    width: calc(100% - 22px);
    margin: 0 11px 14px;
    padding: 13px 24px;
    background: var(--cod-btn-bg, linear-gradient(135deg, var(--cl-success, #16a34a) 0%, var(--cl-success-dark-2, #15803d) 100%));
    color: var(--cod-btn-text, var(--cl-surface, #fff));
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    box-shadow: 0 4px 14px rgba(var(--cod-accent-rgb, 22, 163, 74), 0.3);
    animation: cl-cod1-premium-pulse 2.2s ease-in-out infinite;
}

.cl-cod1-submit-btn:hover {
    background: var(--cod-btn-bg-hover, linear-gradient(135deg, var(--cl-success-dark-2, #15803d) 0%, var(--cl-success-dark-3, #166534) 100%));
    animation-play-state: paused;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--cod-accent-rgb, 22, 163, 74), 0.4);
}

.cl-cod1-submit-btn:active {
    transform: translateY(0);
}

.cl-cod1-submit-btn:disabled {
    background: var(--cl-text-muted, #9ca3af);
    cursor: not-allowed;
    transform: none;
    animation: none;
}

@keyframes cl-cod1-premium-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
}

/* ---- Animated hand pointer click (CSS only, mimics GIF) ---- */
.cl-cod1-click-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
}

.cl-cod1-click-icon .fa-hand-pointer {
    font-size: 25px;
    color: var(--cl-surface, #fff);
    animation: cl-cod1-tap 1s ease-in-out infinite;
    z-index: 1;
}

.cl-cod1-click-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border: 2px solid rgba(255, 255, 255, 0.8); /* white ring on green button */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: cl-cod1-tap-ring 1s ease-out infinite;
}

@keyframes cl-cod1-tap {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    35% {
        transform: translateY(2px) scale(0.9);
    }
    50% {
        transform: translateY(0) scale(1);
    }
}

@keyframes cl-cod1-tap-ring {
    0%, 35% {
        width: 6px;
        height: 6px;
        opacity: 0.8;
    }
    70%, 100% {
        width: 30px;
        height: 30px;
        opacity: 0;
    }
}

/* ---- Success/error message ---- */
.cl-cod1-message {
    padding: 14px 18px;
    margin: 0 20px 16px;
    border-radius: 10px;
    font-size: 14px;
    text-align: center;
}

.cl-cod1-message.cl-cod1-success {
    background: rgba(var(--cod-accent-rgb, 22, 163, 74), 0.08);
    border: 1px solid rgba(var(--cod-accent-rgb, 22, 163, 74), 0.2);
    color: var(--cod-accent, #16a34a);
}

.cl-cod1-message.cl-cod1-error {
    background: var(--cl-danger-bg, #fef2f2);
    border: 1px solid var(--cl-danger-border, #fecaca);
    color: var(--cl-danger-dark, #991b1b);
}

/* ---- State + City row layout ---- */
.cl-cod1-state-city-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cl-cod1-state-city-row .cl-cod1-field-icon {
    flex: 1;
}

/* Desktop: side-by-side for inline form and cart panel */
@media screen and (min-width: 992px) {
    .cl-cod1-state-city-row {
        flex-direction: row;
        gap: 8px;
    }
}

/* Popup form: always stacked on all screen sizes */
.cl-cod1-state-city-row--stacked {
    flex-direction: column;
}

/* ---- Responsive ---- */
@media screen and (max-width: 600px) {
    .cl-cod1-customer-fields {
        padding: 9px 11px;
        gap: 7px;
    }

    .cl-cod1-summary {
        margin: 0 11px 14px;
        padding: 10px 12px;
    }

    .cl-cod1-submit-btn {
        width: calc(100% - 22px);
        margin: 0 11px 12px;
        font-size: 16px;
        padding: 11px 20px;
    }
}