/**
 * Askoweb Order Withdrawal Control - Frontend Styles
 * Responsive and mobile-optimized
 */

/* =====================================================
   FLOATING WIDGET - Fixed size on all screens
   ===================================================== */

/* Container: no inheritance from external styles */
#askwwbs-floating-widget-container {
    font-size: 16px !important;        /* Reset base */
    line-height: 1.4 !important;       /* Reset base */
    -webkit-text-size-adjust: 100% !important;  /* Prevent iOS zoom */
    -moz-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    transform: none !important;        /* No scaling */
    zoom: 1 !important;                /* No zoom */
}

/* Button: no inheritance, absolute pixels */
#askwwbs-floating-widget-container .askwwbs-trigger-button {
    font-size: inherit !important;     /* Set inline */
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    box-sizing: border-box !important;
}

/* Icon symbol: fixed */
#askwwbs-floating-widget-container .askwwbs-icon {
    font-size: inherit !important;     /* Set inline */
    line-height: 1 !important;
    font-weight: normal !important;
    font-style: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
}

/* Hover text: fixed */
#askwwbs-floating-widget-container .askwwbs-text {
    font-size: inherit !important;     /* Set inline */
    line-height: 1.2 !important;
}

/* Pulse animation for touch devices (floating widget draws attention) */
@keyframes askwwbs-pulse {
    0%   { box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
    50%  { box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 0 8px rgba(220,53,69,0.15); }
    100% { box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
}

/* Mobile adjustments - ONLY shadow, no size changes */
@media (max-width: 768px) {
    #askwwbs-floating-widget-container .askwwbs-trigger-button.askwwbs-expandable {
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    }
}

/* Modal - Responsive */
#askwwbs-revocation-modal > div {
    margin: 20px auto !important;
    max-width: calc(100% - 40px) !important;
}

/* =====================================================
   MOBILE – Tablets (≤768px)
   ===================================================== */
@media (max-width: 768px) {
    #askwwbs-revocation-modal {
        padding: 12px !important;
    }

    #askwwbs-revocation-modal > div {
        padding: 24px 18px !important;
        margin: 12px auto !important;
        max-width: calc(100% - 24px) !important;
    }

    /* Grids (customer-info, order-info) → single column */
    #askwwbs-customer-info > div,
    #askwwbs-order-info > div {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    /* Item rows: allow wrapping */
    #askwwbs-items-list label,
    #askwwbs-items-list > div > label,
    #askwwbs-items-list > div > div {
        flex-wrap: wrap !important;
    }

    /* Qty selector: move to own row under item info */
    #askwwbs-items-list label > div:last-child,
    #askwwbs-items-list label > div[style*="margin-left"] {
        margin-left: 30px !important;
        margin-top: 8px !important;
        width: calc(100% - 30px) !important;
        flex-basis: 100% !important;
    }
}

/* =====================================================
   MOBILE – Phones (≤480px)
   ===================================================== */
@media (max-width: 480px) {
    /* Modal overlay: edge-to-edge */
    #askwwbs-revocation-modal {
        padding: 0 !important;
    }

    /* Modal card: full-width, thinner padding */
    #askwwbs-revocation-modal > div {
        margin: 0 !important;
        padding: 20px 14px !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        min-height: 100vh;
        min-height: 100dvh;
        box-sizing: border-box !important;
    }

    /* Title */
    #askwwbs-revocation-modal h2 {
        font-size: 20px !important;
        padding-right: 36px !important;   /* space for close button */
        line-height: 1.3 !important;
    }

    /* Close button bigger for touch */
    #askwwbs-revocation-modal .askwwbs-modal-close {
        font-size: 36px !important;
        top: 12px !important;
        right: 14px !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Inputs: prevent iOS zoom, full width */
    #askwwbs-revocation-modal input[type="text"],
    #askwwbs-revocation-modal input[type="email"],
    #askwwbs-revocation-modal textarea,
    #askwwbs-revocation-modal select {
        font-size: 16px !important;
        padding: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 6px !important;
    }

    /* Labels */
    #askwwbs-revocation-modal label {
        font-size: 14px !important;
    }

    /* Legal notice box */
    #askwwbs-revocation-modal div[style*="background:#fff3cd"] {
        font-size: 12px !important;
        padding: 10px !important;
    }

    /* Order details box */
    #askwwbs-order-details,
    #askwwbs-revocation-modal div[style*="background:#f8f9fa"] {
        padding: 14px !important;
    }

    /* Grids: force single column */
    #askwwbs-customer-info > div,
    #askwwbs-order-info > div {
        display: block !important;
    }

    #askwwbs-customer-info > div > div,
    #askwwbs-order-info > div > div {
        margin-bottom: 6px !important;
        font-size: 13px !important;
    }

    /* Section headings inside modal */
    #askwwbs-order-details h3,
    #askwwbs-items-section h3 {
        font-size: 15px !important;
    }

    /* ---- Item list (partial withdrawal) ---- */
    #askwwbs-items-list label {
        flex-wrap: wrap !important;
        padding: 10px 12px !important;
        gap: 0 !important;
    }

    /* Checkbox: bigger touch target */
    #askwwbs-items-list label input[type="checkbox"] {
        width: 22px !important;
        height: 22px !important;
        margin-right: 10px !important;
        flex-shrink: 0 !important;
    }

    /* Item text block: take full remaining width */
    #askwwbs-items-list label > div:nth-child(2),
    #askwwbs-items-list label > div[style*="flex:1"] {
        flex: 1 1 0% !important;
        min-width: 0 !important;
    }

    /* Item name */
    #askwwbs-items-list label > div[style*="flex:1"] > div:first-child {
        font-size: 14px !important;
        word-break: break-word !important;
    }

    /* Item meta (quantity, price) */
    #askwwbs-items-list label > div[style*="flex:1"] > div:last-child {
        font-size: 12px !important;
        flex-wrap: wrap !important;
    }

    /* Qty selector row: move to new line */
    #askwwbs-items-list label > div:last-child:not([style*="flex:1"]) {
        margin-left: 32px !important;
        margin-top: 8px !important;
        width: calc(100% - 32px) !important;
        flex-basis: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    #askwwbs-items-list label > div:last-child select {
        min-width: 60px !important;
        padding: 8px 10px !important;
        font-size: 14px !important;
    }

    /* Select/Deselect links */
    #askwwbs-items-list + div {
        padding: 8px 0 !important;
    }

    /* ---- Item list (full withdrawal) ---- */
    #askwwbs-items-list > div > div[style*="display:flex"] {
        padding: 10px 12px !important;
    }

    #askwwbs-items-list > div > div[style*="display:flex"] > div[style*="flex:1"] > div:first-child {
        font-size: 14px !important;
        word-break: break-word !important;
    }

    #askwwbs-items-list > div > div[style*="display:flex"] > div[style*="flex:1"] > div:last-child {
        font-size: 12px !important;
    }

    /* ---- Reason section ---- */
    #askwwbs-reason-select {
        font-size: 15px !important;
        padding: 12px !important;
    }

    /* ---- Confirm checkbox ---- */
    #askwwbs-revocation-modal label[style*="display:flex"] {
        gap: 10px !important;
        align-items: flex-start !important;
    }

    #askwwbs-confirm {
        width: 22px !important;
        height: 22px !important;
        margin-top: 2px !important;
        flex-shrink: 0 !important;
    }

    #askwwbs-revocation-modal label[style*="display:flex"] span {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    /* ---- Buttons: stack vertically ---- */
    #askwwbs-revocation-modal div[style*="justify-content:space-between"] {
        flex-direction: column-reverse !important;
        gap: 10px !important;
    }

    #askwwbs-revocation-modal div[style*="justify-content:space-between"] button {
        width: 100% !important;
        padding: 14px !important;
        font-size: 15px !important;
        text-align: center !important;
    }

    /* Step 1: submit button full width */
    #askwwbs-revocation-modal div[style*="text-align:right"] {
        text-align: center !important;
    }

    #askwwbs-revocation-modal div[style*="text-align:right"] button {
        width: 100% !important;
        padding: 14px !important;
    }

    /* ---- Step 3: Success ---- */
    #askwwbs-step-3 {
        padding: 20px 0 !important;
    }

    #askwwbs-step-3 > div:first-child {
        font-size: 48px !important;
    }

    #askwwbs-step-3 h3 {
        font-size: 18px !important;
    }

    #askwwbs-step-3 p {
        font-size: 14px !important;
    }

    /* PDF download button */
    #askwwbs-pdf-download a {
        display: block !important;
        width: 100% !important;
        padding: 14px !important;
        text-align: center !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
    }

    /* Error message */
    #askwwbs-error-message {
        font-size: 13px !important;
        padding: 10px 12px !important;
    }
}

/* =====================================================
   MOBILE – Very small phones (≤360px)
   ===================================================== */
@media (max-width: 360px) {
    #askwwbs-revocation-modal > div {
        padding: 16px 10px !important;
    }

    #askwwbs-revocation-modal h2 {
        font-size: 18px !important;
    }

    #askwwbs-items-list label > div[style*="flex:1"] > div:first-child {
        font-size: 13px !important;
    }

    /* Even smaller checkbox area offset */
    #askwwbs-items-list label > div:last-child:not([style*="flex:1"]) {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* Footer Button - Responsive */
@media (max-width: 480px) {
    .askwwbs-footer-item a,
    .askwwbs-footer-link {
        font-size: 13px !important;
        padding: 4px !important;
    }
}

/* Touch devices - bigger click targets */
@media (hover: none) and (pointer: coarse) {
    #askwwbs-floating-widget-container .askwwbs-trigger-button {
        min-width: 48px !important;
        min-height: 48px !important;
    }
    
    /* Footer link: WCAG minimum touch target */
    .askwwbs-footer-item a,
    .askwwbs-footer-link {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
}

/* =====================================================
    SPECIFIC PAGE BUTTON - Alignment
   ===================================================== */

.askwwbs-page-button-wrapper {
    width: 100%;
    padding: 20px 0;
    box-sizing: border-box;
}

.askwwbs-page-button-wrapper.askwwbs-align-left {
    text-align: left !important;
}

.askwwbs-page-button-wrapper.askwwbs-align-center {
    text-align: center !important;
}

.askwwbs-page-button-wrapper.askwwbs-align-right {
    text-align: right !important;
}

.askwwbs-page-button-wrapper .askwwbs-trigger-button {
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
    display: inline-block;
}

@media (max-width: 480px) {
    .askwwbs-page-button-wrapper .askwwbs-trigger-button {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .askwwbs-page-button-wrapper {
        padding: 15px 0 !important;
    }
}

/* =====================================================
   SAFE-AREA (notch/Dynamic Island devices)
   ===================================================== */
@supports (padding: env(safe-area-inset-bottom)) {
    #askwwbs-revocation-modal > div {
        padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    }

    #askwwbs-floating-widget-container {
        bottom: calc(var(--askwwbs-bottom, 150px) + env(safe-area-inset-bottom)) !important;
    }
}

/* =====================================================
   LANDSCAPE PHONE
   ===================================================== */
@media (max-height: 500px) and (orientation: landscape) {
    #askwwbs-revocation-modal > div {
        min-height: auto !important;
        margin: 8px auto !important;
        padding: 16px !important;
    }

    #askwwbs-step-3 > div:first-child {
        font-size: 36px !important;
        margin-bottom: 10px !important;
    }
}