:root {
    --navy: #1b3a63;
    --navy-deep: #142c4d;
    --navy-soft: #284a78;
    --gold: #c6a268;
    --gold-light: #d9bd8c;
    --ink: #28384c;
    --muted: #62748a;
    --line: #dde2e8;
    --panel-bg: #ffffff;
    --page-bg: #f3f1ec;
}

* {
    box-sizing: border-box;
}


    #wp-chatbot{

    width:320px;

    position:fixed;

    bottom:20px;

    right:20px;

    background:#fff;

    border:4px solid #d8b15f;

    border-radius:10px;

    overflow:hidden;

    font-family:Arial;

    box-shadow:0 5px 15px rgba(0,0,0,.2);

}

.chat-header{

    background:#0d2f61;

    color:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px;

}

.title{

    font-size:20px;

    font-weight:bold;

}

.close-chat{

    cursor:pointer;

    font-size:20px;

}

#chat-body{

    padding:10px 10px;

    text-align:center;

    height:320px;

    overflow-y:auto;

}

.menu-buttons{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:10px;

}

.main-menu{

    border:1px solid #999;

    background:#fff;

    border-radius:5px;

    padding:8px 12px;

    cursor:pointer;

}


.not_happpy{

    border:1px solid #999;

    background:#fff;

    border-radius:5px;

    padding:8px 12px;

    cursor:pointer;

}

.chat-footer{

    display:flex;

    border-top:1px solid #ddd;

}

#chat-input{

    flex:1;

    border:0;

    padding:12px;

    outline:none;

}

#send-message{

    width:50px;

    border:0;

    background:#0d2f61;

    color:#fff;

    cursor:pointer;

}

           .hi-dock {
                position: fixed;
                right: max(24px, env(safe-area-inset-right));
                bottom: max(24px, env(safe-area-inset-bottom));
                z-index: 9999;
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            }

            .hi-dock-buttons {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                gap: 12px;
            }

            .hi-dock.is-open .hi-dock-buttons {
                display: none;
            }

            /* ---- shared launcher button shape ---- */
            .hi-launcher {
                display: inline-flex;
                align-items: center;
                gap: 10px;
                color: #fff;
                border: none;
                border-radius: 30px;
                padding: 13px 24px 13px 18px;
                font-size: 12px;
                font-weight: 600;
                letter-spacing: 0.2px;
                cursor: pointer;
                box-shadow: 0 8px 20px rgba(20, 30, 50, 0.22);
                transition:
                    transform 0.15s ease,
                    box-shadow 0.15s ease;
            }

            .hi-launcher:hover {
                transform: translateY(-2px);
                box-shadow: 0 10px 24px rgba(20, 30, 50, 0.28);
            }

            .hi-launcher:focus-visible {
                outline: 2px solid var(--navy);
                outline-offset: 3px;
            }

            .hi-launcher svg {
                width: 22px;
                height: 22px;
                flex-shrink: 0;
            }

            .hi-launcher--chat {
                background: linear-gradient(180deg, var(--gold-light), var(--gold));
            }

            .hi-launcher--help {
                background: linear-gradient(180deg, var(--navy-soft), var(--navy-deep));
            }

            /* =====================================================
    PANEL — shared shell, content differs per variant
     ===================================================== */
            .hi-panel {
                width: 450px;
                max-width: calc(100vw - 32px);
                max-height: min(560px, calc(100vh - 110px));
                max-height: min(560px, calc(100dvh - 110px));
                background: var(--panel-bg);
                border: 2px solid var(--gold);
                border-radius: 16px;
                box-shadow: 0 18px 44px rgba(20, 30, 50, 0.22);
                overflow: hidden;
                display: none;
                flex-direction: column;
            }

            .hi-dock.is-open .hi-panel.is-active {
                display: flex;
                animation: hi-pop 0.18s ease-out;
            }

            @keyframes hi-pop {
                from {
                    opacity: 0;
                    transform: translateY(10px) scale(0.97);
                }

                to {
                    opacity: 1;
                    transform: translateY(0) scale(1);
                }
            }

            @media (prefers-reduced-motion: reduce) {
                .hi-dock.is-open .hi-panel.is-active {
                    animation: none;
                }
            }

            /* per-variant accent used by the send button */
            .hi-panel[data-variant="chat"] {
                --accent: var(--gold);
                --accent-hover: #b58e54;
            }

            .hi-panel[data-variant="help"] {
                --accent: var(--navy);
                --accent-hover: var(--navy-deep);
            }

            /* ---- header (shared) ---- */
            .hi-header {
                background: linear-gradient(180deg, var(--navy), var(--navy-deep));
                color: #fff;
                padding: 16px 16px 16px 18px;
                display: flex;
                align-items: center;
                gap: 10px;
                flex-shrink: 0;
            }

            .hi-header svg.hi-horse {
                width: 26px;
                height: 26px;
                flex-shrink: 0;
            }

            .hi-header-title {
                font-family: Georgia, "Times New Roman", serif;
                font-size: 16px;
                font-weight: 700;
                letter-spacing: 0.2px;
                flex: 1;
                min-width: 0;
            }

            .hi-close {
                background: transparent;
                border: none;
                color: #fff;
                width: 28px;
                height: 28px;
                border-radius: 6px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                opacity: 0.85;
                flex-shrink: 0;
            }

            .hi-close:hover {
                opacity: 1;
                background: rgba(255, 255, 255, 0.12);
            }

            .hi-close svg {
                width: 16px;
                height: 16px;
            }

            /* ---- body / scroll area ---- */
            .hi-body {
                padding: 0px;
                overflow-y: auto;
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 5px;
            }

            .hi-panel[data-variant="help"] .hi-body {
                min-height: 220px;
            }

            .hi-welcome-title {
                font-family: Georgia, "Times New Roman", serif;
                color: var(--navy);
                font-size: 18px;
                font-weight: 700;
                text-align: center;
                margin: 0;
            }

            .hi-welcome-text {
                color: var(--muted);
                font-size: 14px;
                line-height: 1.55;
                text-align: center;
                margin: 0;
                padding: 0px 7px 0px 7px;
                font-weight: bold;
            }

            .hi-welcome-text-2-main {
                color: var(--muted);
                font-size: 12px;
                line-height: 1.55;
                text-align: center;
                margin: 0;
            }


            .hi-options {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 10px;
                margin-top: 4px;
            }

            .hi-option {
                /*flex: 1 1 calc(50% - 10px);*/
                border: 1px solid #c6a268;
                background: #fff;
                color: #142c4d;
                padding: 10px;
                border-radius: 8px;
                cursor: pointer;
                transition: 0.3s;
                font-size: 12px;
                font-weight: 500;
            }

            .hi-option:hover {
                background: #142c4d !important;
                color: #fff !important;
            }

            /* .sub-menu.hi-option{
    margin: 5px;
} */


.login-option{
    border: none !important;
}
            .order-btn {
                width: 83%;
                display: block;
                box-sizing: border-box;

                background: #eef0ff;
                border: 1px solid #dfe3e8;
                border-radius: 8px;

                padding: 11px 13px;
                margin-bottom: 8px;

                text-align: left;
                cursor: pointer;
                margin: 0px auto 8px auto;
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

                transition:
                    background 0.15s ease,
                    border-color 0.15s ease;
            }

            .order-btn strong {
                display: block;
                margin-bottom: 3px;

                color: #1b3a63;
                font-size: 12px;
                font-weight: 700;
            }

            .order-info {
                display: block;

                color: #28384c;
                font-size: 12px;
                font-weight: 500;
                line-height: 1.4;
            }

            .order-date {
                display: block;

                color: #142d4f;
                font-size: 11px;
                margin-top: 2px;
            }

            .order-btn:hover {
                background: #eef0ff;
                border-color: #28384c;
            }

            .order-btn:focus {
                outline: none;
                border-color: #c6a268;
                box-shadow: 0 0 0 2px rgba(198, 162, 104, 0.15);
            }
            .hi-option:hover {
                border-color: var(--gold);
                background: #fbf7ef;
            }

            .hi-option:focus-visible {
                outline: 2px solid var(--gold);
                outline-offset: 2px;
            }

            .hi-option--wide {
                grid-column: 1 / -1;
            }

            /* ---- conversation thread ---- */
            .hi-thread {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }

            .hi-msg {
                max-width: 85%;
                font-size: 13.5px;
                line-height: 1.5;
                padding: 9px 13px;
                border-radius: 14px;
            }

            .hi-msg--bot {
                align-self: flex-start;
                background: #f1f4f8;
                color: var(--ink);
                border-bottom-left-radius: 4px;
            }

            .hi-msg--user {
                align-self: flex-end;
                background: var(--navy);
                color: #fff;
                border-bottom-right-radius: 4px;
            }

            .hi-msg--agent strong {
                color: var(--navy);
            }

            /* ---- footer / input (shared, accent via --accent var) ---- */
            .hi-footer {
                border-top: 1px solid var(--line);
                padding: 10px 12px;
                /*    display: flex;
    align-items: center;*/
                gap: 8px;
                flex-shrink: 0;
            }

            .hi-input {
                flex: 1;
                border: none;
                outline: none;
                background: transparent;
                font-size: 14px;
                color: var(--ink);
                padding: 8px 6px;
                font-family: inherit;
                width: 88%;
            }

            .hi-input::placeholder {
                color: #9aa6b4;
                font-style: italic;
            }

            .hi-send {
                width: 36px;
                height: 36px;
                border-radius: 50%;
                border: none;
                background: var(--accent, var(--gold));
                color: #fff;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                flex-shrink: 0;
                transition: background 0.12s ease;
            }

            .hi-send:hover {
                background: var(--accent-hover, #b58e54);
            }

            .hi-send svg {
                width: 16px;
                height: 16px;
                margin-left: 1px;
            }

            .hi-send-new {
                width: 36px;
                height: 36px;
                border-radius: 50%;
                border: none;
                background: var(--accent, var(--gold));
                color: #fff;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                flex-shrink: 0;
                transition: background 0.12s ease;
            }

            .hi-send-new:hover {
                background: var(--accent-hover, #b58e54);
            }

            .hi-send-new svg {
                width: 16px;
                height: 16px;
                margin-left: 1px;
            }

            /* ---- mobile: dock spans the width, panel goes full-bleed ---- */
            @media (max-width: 480px) {
                .hi-dock {
                    right: max(12px, env(safe-area-inset-right));
                    bottom: max(12px, env(safe-area-inset-bottom));
                    left: max(12px, env(safe-area-inset-left));
                    align-items: stretch;
                }

                .hi-dock-buttons {
                    align-items: flex-end;
                }

                .hi-panel {
                    width: 100%;
                    max-width: none;
                }
            }

            /* ---- very small phones: tighten type and stack option buttons ---- */
            @media (max-width: 360px) {
                .hi-launcher {
                    padding: 11px 18px 11px 14px;
                    font-size: 14px;
                    gap: 8px;
                }

                .hi-launcher svg {
                    width: 19px;
                    height: 19px;
                }

                .hi-header {
                    padding: 14px;
                }

                .hi-header-title {
                    font-size: 14.5px;
                }

                .hi-body {
                    padding: 18px 16px 14px;
                }

                .hi-options {
                    grid-template-columns: 1fr;
                }

                .hi-option--wide {
                    grid-column: auto;
                }
            }

            /* ---- short / landscape viewports: compress vertical rhythm so the panel fits ---- */
            @media (max-height: 500px) {
                .hi-panel {
                    max-height: min(420px, calc(100vh - 24px));
                    max-height: min(420px, calc(100dvh - 24px));
                }

                .hi-dock {
                    bottom: max(10px, env(safe-area-inset-bottom));
                }

                .hi-header {
                    padding: 10px 14px;
                }

                .hi-body {
                    padding: 0px;
                    gap: 5px;
                }

                .hi-panel[data-variant="help"] .hi-body {
                    min-height: 0;
                }

                .hi-welcome-text {
                    display: none;
                }
            }

            .back-menu-wrapper {
                display: flex;

                justify-content: flex-start;

                width: 100%;

                margin: 8px 15px 12px;
            }

            .back-main-menu {
                background: #f8f9fa;

                border: 1px solid #e5e7eb;

                border-radius: 30px;

                padding: 4px 10px;

                font-size: 11px;

                font-weight: 600;

                cursor: pointer;

                color: #4b5563;

                transition: all 0.2s ease;

                display: inline-flex;

                align-items: center;

                gap: 4px;

                line-height: 1;
            }

            .back-main-menu:hover {
                background: #eef2ff;

                border-color: #2563eb;

                color: #2563eb;
            }

            #chat-loader {
                width: 100%;

                display: flex;

                justify-content: center;

                align-items: center;

                gap: 6px;

                padding: 10px 0;
            }

            .loader-dot {
                width: 8px;

                height: 8px;

                border-radius: 50%;

                background: #2563eb;

                animation: loader 1.2s infinite ease-in-out;
            }

            .loader-dot:nth-child(2) {
                animation-delay: 0.2s;
            }

            .loader-dot:nth-child(3) {
                animation-delay: 0.4s;
            }

            @keyframes loader {
                0%,
                80%,
                100% {
                    transform: scale(0.6);

                    opacity: 0.5;
                }

                40% {
                    transform: scale(1);

                    opacity: 1;
                }
            }

            .user-message {
                width: fit-content;

                max-width: 80%;

                margin: 10px 0 10px auto;

                padding: 10px 14px;

                background: var(--navy);

                color: #fff;

                border-radius: 18px 18px 4px 18px;

                font-size: 12px;

                line-height: 1.5;

                font-weight: 500;

                word-break: break-word;

                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
            }

            ul {
                text-align: justify;
            }

            #chat-body {
                font-family: Georgia, "Times New Roman", serif;
                /* padding: 25px 22px; */
                display: flex;
                gap: 10px;
                height: 460px;
                /* margin-bottom: 82px; */
                overflow-y: auto;
                flex-direction: column;
                scrollbar-width: thin;
                scrollbar-color: #ccccf5 transparent;
                color: var(--navy);
            }

            .bot-message {
                position: relative;
                margin: 9px 0px 8px 50px;
                padding: 6px 18px;
                background: #eef0ff;
                border-radius: 12px;
                color: #142d4f;
                font-size: 12px;
                max-width: 80%;
                word-wrap: break-word;
                text-align: left;
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
            }

            /* Small bubble arrow */
            .bot-message::after {
                content: "";
                position: absolute;
                left: -8px;
                top: 18px;
                width: 16px;
                height: 16px;
                background: #eef0ff;
                transform: rotate(45deg);
            }

            /* Bot icon */
            .bot-message::before {
                content: "";
                position: absolute;
                left: -48px;
                top: 0;
                width: 34px;
                height: 34px;

                background-color: #162f52;
                background-image: url("https://egmediamailimg.s3.ap-south-1.amazonaws.com/web-storage/HI%20Customer%20Chat%20box-2026/Horse.png");
                background-size: 28px 28px;
                background-position: center;
                background-repeat: no-repeat;

                border-radius: 50%;

                display: flex;
                align-items: center;
                justify-content: center;
            }

            .bot-message p {
                margin: 0 0 10px;
                line-height: 1.5;
                color: var(--navy);
                text-align: left;
                font-size: 12px !important;
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
            }

            .bot-message ul {
                margin: 0;
                padding-left: 20px;
            }

            .bot-message li {
                margin: 6px 0;
                line-height: 1.5;
                text-align: left;
                color: var(--navy);
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
            }

            .bot-message p:empty {
                display: none;
            }

            
            .status-active {
                color: green;
            }

            .status-inactive {
                color: red;
            }

           

            .payment-card {
    width: 87%;
    box-sizing: border-box;
    padding: 6px;
   
    background: #eef0ff;
     border: 1px solid #dfe3e8;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    margin: 0 auto 10px;
}

.payment-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.payment-card-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f4f8;
    border-radius: 8px;
    font-size: 21px;
}

.payment-card-info {
    min-width: 0;
    flex: 1;
}

.payment-card-info strong {
    display: block;
    color: #152f52;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.payment-card-info span {
    display: block;
    margin-top: 3px;
    color: #737b85;
    font-size: 12px;
    line-height: 18px;
}

.update-payment-card {
        width: 58%;
    margin-top: 14px;
    padding: 9px 12px;
    border: 1px solid #152f52;
    border-radius: 6px;
    background: #152f52;
    color: #ffffff;
    font-size: 11px;
   
    line-height: 13px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.update-payment-card:hover {
    background: #ffffff;
    color: #152f52;
}

.update-payment-card:active {
    transform: scale(0.98);
}



.image-upload-wrapper {
    width: 100%;
    margin: 12px 0;
}

.image-upload-box {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    box-sizing: border-box;

    background: #fff;
    border: 1px dashed #b8c0cc;
    border-radius: 12px;

    cursor: pointer;
    transition: all 0.2s ease;
}

.image-upload-box:hover {
    border-color: #152f52;
    background: #f7f9fc;
}

.image-upload-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eef0ff;
    color: #fff;
    border-radius: 10px;

    font-size: 18px;
}

.image-upload-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.image-upload-text strong {
    font-size: 14px;
    color: #152f52;
    font-weight: 600;
}

.image-upload-text span {
    font-size: 12px;
    color: #777;
}


.submit-wrong-chat {
    width: 100%;
    max-width: 320px;
    margin: 14px auto 0;
    padding: 13px 20px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    border: none;
    border-radius: 8px;

    background: #152f52;
    color: #ffffff;

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
    transition: all 0.2s ease;

    box-shadow: 0 2px 6px rgba(21, 47, 82, 0.18);
}

.submit-wrong-chat:hover {
    background: #0f243f;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(21, 47, 82, 0.25);
}

.submit-wrong-chat:active {
    transform: translateY(0);
}

.submit-btn-icon {
    width: 20px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;

    font-size: 12px;
}


.email-update-wrapper {
    margin: 12px 0;
    padding: 15px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    box-sizing: border-box;
}

.email-update-label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.email-input-box {
    position: relative;
    width: 100%;
}

.email-input-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    font-size: 16px;
    z-index: 1;
}

.email-update-wrapper .chat-input-field {
    width: 100%;
    height: 44px;
    padding: 0 12px 0 38px;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    color: #333;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.email-update-wrapper .chat-input-field::placeholder {
    color: #999;
}

.email-update-wrapper .chat-input-field:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.10);
}

.email-update-wrapper .update-email-submit {
    width: 100%;
    margin-top: 12px;
    min-height: 42px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.email-update-wrapper .update-email-submit:hover {
    opacity: 0.9;
}


.wrong-publication-preview {
    position: relative;
    display: none;
    width: 120px;
    height: 120px;
    margin-top: 10px;
}

.wrong-publication-preview img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #ddd;
}

#remove_wrong_publication_image {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #000;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

.confirmation-buttons {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    justify-content: center;
}

.confirmation-buttons button {
    min-width: 80px;
    padding: 10px 22px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.confirmation-buttons button:hover {
    background: #f5f5f5;
    border-color: #bbb;
}

.confirmation-buttons button:active {
    transform: scale(0.97);
}

.confirmation-buttons button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.input-error {
    border: 1px solid #dc3545 !important;
}

.field-error {
    color: #dc3545 !important;
    font-size: 12px !important;
    display: block !important;
}

.issue-suggestions {
    display: none;
    position: absolute;
    background: #fff;
    border: 1px solid #ddd;
    width: 100%;
    z-index: 9999;
}
 
.issue-suggestion {
    padding: 8px 12px;
    cursor: pointer;
}
 
.issue-suggestion:hover {
    background: #f5f5f5;
}

.digital-copy {
    display: flex;
    width: 76%;
    margin-bottom: 10px;
    align-items: center;
    justify-content: center;
}

.upload-damaged-image {
    margin-top: 10px;
}


.chatbot-input.hi-input:disabled {
    background-color: #f5f5f5;
    color: #999;
    cursor: not-allowed;
    opacity: 0.7;
}
.chatbot-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.update-shipping-address{
    display: block;
    width: 137px;
    margin: 10px auto 0;
}

.refund-summary{
    line-height: 2;
    margin: 10px 0;
}


/* Refund reason container */
.refund-reason-wrapper {
    margin-top: 15px;
    margin-bottom: 15px;
}

/* Label */
.refund-reason-wrapper label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 600;
}

/* Select box */
.refund-reason {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    color: #333;
    outline: none;
    cursor: pointer;
    box-sizing: border-box;
}

/* Select focus */
.refund-reason:focus {
    border-color: #999;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}

/* Other reason textarea */
.refund-reason-other {
    width: 100%;
    min-height: 90px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}

/* Textarea focus */
.refund-reason-other:focus {
    border-color: #999;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}

/* Placeholder */
.refund-reason-other::placeholder {
    color: #999;
}

.refund-error-message {
    display: block;
    margin-top: 5px;
    color: #dc3545;
    font-size: 12px;
}
.refund-no{
    width: 36%;
}

.load-more-orders {
    width: 48%;
    margin: 10px auto;
    display: block;
    text-align: center;
    cursor: pointer;
}


.subscription-card {
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #e2e6ea;
    border-radius: 12px;
    margin: 12px 0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

}

/* Header */
.subscription-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #f7f9fb;
    border-bottom: 1px solid #e9ecef;
}

.subscription-title {
    font-weight: 700;
    margin-bottom: 5px;
}



/* Status */
.subscription-status {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 20px;
    font-weight: 600;
    white-space: nowrap;
}

.status-active {
    background: #e8f7ee;
}

.status-expired {
    background: #fdecec;
}

/* Message */
.subscription-message {
    padding: 7px 10px;
    line-height: 1.6;
    border-bottom: 1px solid #eeeeee;
}



/* Details heading */
.subscription-details-title {
    padding: 13px 16px 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Details */
.subscription-details {
    padding: 0 10px 10px;
}

.subscription-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 9px 0;
    border-bottom: 1px solid #f0f0f0;
}

.subscription-row:last-child {
    border-bottom: none;
}

.subscription-row span {
    flex: 0 0 42%;
}

.subscription-row strong {
    text-align: right;
    word-break: break-word;
}