@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap');

* {
    font-family: 'DM Sans', 'Plus Jakarta Sans', sans-serif;
}


/* ============================================================
   MOBILE AREA CODE SELECTOR + OPEN DROPDOWN
   Only for this selector block
   ============================================================ */

/* wrapper */
.am-element.group {
    display: flex !important;
    align-items: stretch !important;
    gap: 12px !important;
}

/* select2 closed box */
.am-element.group .select2-container {
    min-width: 95px !important;
    max-width: 120px !important;
}

.am-element.group .select2-container .select2-selection--single {
    height: 52px !important;
    border: 2px solid #EDE9FE !important;
    border-radius: 14px !important;
    background: #F5F3FF !important;
    box-shadow: none !important;
    transition: all 0.25s ease !important;
    display: flex !important;
    align-items: center !important;
}

.am-element.group .select2-container .select2-selection--single:focus,
.am-element.group .select2-container.select2-container--focus .select2-selection--single,
.am-element.group .select2-container.select2-container--open .select2-selection--single {
    border-color: #A78BFA !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.08) !important;
}

/* selected text */
.am-element.group .select2-container .select2-selection__rendered {
    color: #1E1133 !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 48px !important;
    padding-left: 16px !important;
    padding-right: 34px !important;
}

/* arrow */
.am-element.group .select2-container .select2-selection__arrow {
    height: 100% !important;
    right: 12px !important;
    width: 16px !important;
}

.am-element.group .select2-container .select2-selection__arrow b {
    border-color: #7C3AED transparent transparent transparent !important;
    border-width: 6px 5px 0 5px !important;
    margin-left: -5px !important;
    margin-top: -2px !important;
}

/* phone input beside selector */
.am-element.group input[type="text"]#mobile_number-0,
.am-element.group input[name="mobile_number"] {
    flex: 1 !important;
    min-width: 0 !important;
}

/* ============================================================
   OPEN DROPDOWN
   ============================================================ */
.select2-dropdown {
    border: 1px solid rgba(139, 92, 246, 0.12) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 12px 32px rgba(124, 58, 237, 0.12) !important;
    padding: 6px !important;
}

/* search box if shown */
.select2-search--dropdown {
    padding: 6px !important;
    background: #ffffff !important;
}

.select2-search--dropdown .select2-search__field {
    border: 2px solid #EDE9FE !important;
    border-radius: 12px !important;
    background: #F5F3FF !important;
    color: #1E1133 !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 14px !important;
    padding: 10px 12px !important;
    outline: none !important;
    box-shadow: none !important;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: #A78BFA !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.08) !important;
}

/* results container */
.select2-results__options {
    max-height: 260px !important;
    padding: 4px !important;
}

/* each option */
.select2-results__option {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1E1133 !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    margin: 2px 0 !important;
    transition: all 0.2s ease !important;
}

/* highlighted option */
.select2-results__option--highlighted,
.select2-results__option--highlighted[aria-selected] {
    background: linear-gradient(135deg, #F5F3FF, #EDE9FE) !important;
    color: #7C3AED !important;
}

/* selected option */
.select2-results__option[aria-selected="true"] {
    background: rgba(124, 58, 237, 0.08) !important;
    color: #7C3AED !important;
    font-weight: 700 !important;
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 480px) {
    .am-element.group {
        gap: 10px !important;
    }

    .am-element.group .select2-container {
        min-width: 85px !important;
        max-width: 95px !important;
    }

    .am-element.group .select2-container .select2-selection--single {
        height: 48px !important;
        border-radius: 12px !important;
    }

    .am-element.group .select2-container .select2-selection__rendered {
        font-size: 14px !important;
        line-height: 44px !important;
        padding-left: 12px !important;
    }
}


/* Error block — light styling only */
.row.row-cards > table:first-child {
    margin-bottom: 14px !important;
}

.row.row-cards > table:first-child span[style*="#F44336"] {
    display: inline-block !important;
    padding: 14px 18px !important;
    border-radius: 14px !important;
    background: #FFF5F5 !important;
    border: 1px solid rgba(244, 67, 54, 0.14) !important;
    color: #DC2626 !important;
    font-weight: 700 !important;
    font-family: 'DM Sans', sans-serif !important;
    line-height: 1.5 !important;
}

.row.row-cards a[href^="mailto:"] {
    color: #7C3AED !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.row.row-cards a[href^="mailto:"]:hover {
    color: #6B21A8 !important;
    text-decoration: underline !important;
}

/* ============================================================
   HELPDESK / TICKETS
   Premium purple theme
   ============================================================ */

/* ------------------------------------------------------------
   GRID WRAPPER / PAGE CARDS
   ------------------------------------------------------------ */
.am-grid-wrap#grid-user,
.am-helpdesk,
.am-grid-container {
    background: #ffffff !important;
    border: 1px solid rgba(139, 92, 246, 0.08) !important;
    border-radius: 24px !important;
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.06) !important;
}

.am-grid-wrap#grid-user {
    padding: 28px !important;
    margin-bottom: 24px !important;
    position: relative;
    overflow: hidden;
}

.am-grid-wrap#grid-user::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(135deg, #7C3AED, #8B5CF6, #A78BFA);
}

/* ------------------------------------------------------------
   PAGE / BLOCK TITLES
   ------------------------------------------------------------ */
.am-grid-wrap#grid-user > h1,
.am-helpdesk + h1,
h1 .am-grid-title-text,
.am-grid-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: #1E1133 !important;
    font-weight: 800 !important;
    letter-spacing: -0.4px !important;
}

.am-grid-wrap#grid-user > h1,
.am-grid-title {
    margin: 0 0 20px 0 !important;
    font-size: 28px !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.am-grid-title-desc {
    display: inline-flex !important;
    align-items: center !important;
}

.am-grid-title-desc__total {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #7C3AED !important;
    background: rgba(124, 58, 237, 0.08) !important;
    border: 1px solid rgba(124, 58, 237, 0.12) !important;
    border-radius: 999px !important;
    padding: 6px 12px !important;
}

/* ------------------------------------------------------------
   BACK BUTTON
   ------------------------------------------------------------ */
.am-grid-back-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    margin-right: 6px !important;
}

.am-grid-back {
    display: inline-flex !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #F5F3FF, #EDE9FE) !important;
    border: 1px solid rgba(139, 92, 246, 0.10) !important;
    text-decoration: none !important;
    position: relative !important;
    transition: all 0.25s ease !important;
}

.am-grid-back::before {
    content: "←";
    color: #7C3AED;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}

.am-grid-back:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.10) !important;
    border-color: rgba(124, 58, 237, 0.18) !important;
}

/* ------------------------------------------------------------
   NO RECORDS ACTIONS / TOP BUTTON
   ------------------------------------------------------------ */
.am-norecord-actions {
    margin-top: 8px !important;
}

.am-norecord-actions .button,
#am-grid-wrap-ticket-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 22px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #7C3AED, #8B5CF6) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.24) !important;
    transition: all 0.28s ease !important;
}

.am-norecord-actions .button:hover,
#am-grid-wrap-ticket-button:hover {
    background: linear-gradient(135deg, #6B21A8, #7C3AED) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(124, 58, 237, 0.32) !important;
}

/* ------------------------------------------------------------
   HELPDESK FORM WRAPPER
   ------------------------------------------------------------ */
#signup-page .am-form form.am-helpdesk-form {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

#signup-page .am-helpdesk-form .am-row {
    display: block !important;
    margin: 0 0 22px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

#signup-page .am-helpdesk-form .am-element-title {
    width: 100% !important;
    float: none !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
}

#signup-page .am-helpdesk-form .am-element-title label {
    display: inline-block !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1E1133 !important;
}

#signup-page .am-helpdesk-form .required {
    color: #7C3AED !important;
    font-weight: 800 !important;
}

#signup-page .am-helpdesk-form .am-element {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ------------------------------------------------------------
   INPUTS / TEXTAREA
   ------------------------------------------------------------ */
#signup-page .am-helpdesk-form input[type="text"],
#signup-page .am-helpdesk-form textarea {
    width: 100% !important;
    border: 2px solid #EDE9FE !important;
    border-radius: 16px !important;
    background: #F5F3FF !important;
    color: #1E1133 !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 15px 16px !important;
    transition: all 0.25s ease !important;
    box-shadow: none !important;
}

#signup-page .am-helpdesk-form input[type="text"]::placeholder,
#signup-page .am-helpdesk-form textarea::placeholder {
    color: #9C8AB8 !important;
}

#signup-page .am-helpdesk-form input[type="text"]:focus,
#signup-page .am-helpdesk-form textarea:focus {
    outline: none !important;
    border-color: #A78BFA !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.10) !important;
}

#signup-page .am-helpdesk-form textarea {
    min-height: 180px !important;
    resize: vertical !important;
    line-height: 1.7 !important;
}

/* Reply panel smaller textarea */
.am-helpdesk-reply-panel #signup-page .am-helpdesk-form textarea {
    min-height: 120px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
}

/* ------------------------------------------------------------
   ATTACHMENTS EXPAND LINK
   ------------------------------------------------------------ */
.am-helpdesk-attachment-expand {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
    background: rgba(124, 58, 237, 0.08) !important;
    border: 1px solid rgba(124, 58, 237, 0.14) !important;
    color: #7C3AED !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    transition: all 0.25s ease !important;
}

.am-helpdesk-attachment-expand:hover {
    background: rgba(124, 58, 237, 0.14) !important;
    border-color: rgba(124, 58, 237, 0.22) !important;
    color: #6B21A8 !important;
    transform: translateY(-1px) !important;
}

/* Attachments row */
#row-attachments-0 {
    background: linear-gradient(135deg, #FAF8FF, #F5F3FF) !important;
    border: 1px solid rgba(139, 92, 246, 0.08) !important;
    border-radius: 18px !important;
    padding: 18px 20px !important;
}

/* Upload button */
.upload-control {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.upload-control-upload,
.upload-control-upload-single {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #7C3AED, #8B5CF6) !important;
    color: #ffffff !important;
    min-width: 120px !important;
    height: 44px !important;
    padding: 0 18px !important;
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.18) !important;
    transition: all 0.25s ease !important;
}

.upload-control-upload span,
.upload-control-upload-single span {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    font-family: 'DM Sans', sans-serif !important;
    text-transform: capitalize !important;
}

.upload-control-upload:hover,
.upload-control-upload-single:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.24) !important;
}

/* ------------------------------------------------------------
   FORM BUTTONS
   ------------------------------------------------------------ */
#signup-page .am-helpdesk-form input[type="submit"],
#signup-page .am-helpdesk-form input[type="button"] {
    border: none !important;
    border-radius: 14px !important;
    padding: 14px 22px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    transition: all 0.28s ease !important;
    cursor: pointer !important;
}

#signup-page .am-helpdesk-form input[type="submit"] {
    background: linear-gradient(135deg, #7C3AED, #8B5CF6) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.24) !important;
}

#signup-page .am-helpdesk-form input[type="submit"]:hover {
    background: linear-gradient(135deg, #6B21A8, #7C3AED) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(124, 58, 237, 0.32) !important;
}

#signup-page .am-helpdesk-form input[type="button"] {
    background: #F5F3FF !important;
    color: #4A3D63 !important;
    border: 1px solid rgba(139, 92, 246, 0.10) !important;
}

#signup-page .am-helpdesk-form input[type="button"]:hover {
    background: #EDE9FE !important;
    color: #1E1133 !important;
}

#signup-page .am-helpdesk-form .group {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

/* ------------------------------------------------------------
   FORM ERRORS
   ------------------------------------------------------------ */
#signup-page .am-helpdesk-form span.am-error {
    display: block !important;
    margin-top: 8px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    background: rgba(239, 68, 68, 0.06) !important;
    border: 1px solid rgba(239, 68, 68, 0.12) !important;
    color: #B91C1C !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
}

/* ------------------------------------------------------------
   SUBMISSION SUCCESS BOX
   ------------------------------------------------------------ */
.am-grid-wrap#grid-user p {
    color: #4A3D63;
    font-size: 15px;
    line-height: 1.8;
    margin: 0 0 12px 0;
}

.am-grid-wrap#grid-user p:last-child {
    margin-bottom: 0;
}

.am-grid-wrap#grid-user .link {
    color: #7C3AED !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.am-grid-wrap#grid-user .link:hover {
    color: #6B21A8 !important;
    text-decoration: underline !important;
}

/* ------------------------------------------------------------
   TICKET VIEW HEADER
   ------------------------------------------------------------ */
.am-helpdesk {
    padding: 24px !important;
    margin-bottom: 24px !important;
}

.am-helpdesk-ticket {
    border: 1px solid rgba(139, 92, 246, 0.08) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 4px 18px rgba(124, 58, 237, 0.04) !important;
}

.am-helpdesk-ticket-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 18px 20px !important;
    background: linear-gradient(135deg, #FAF8FF, #F5F3FF) !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.08) !important;
}

.am-helpdesk-ticket-info {
    color: #4A3D63 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.am-helpdesk-ticket-info strong {
    color: #1E1133 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* Subject + mask header */
.am-helpdesk-ticket-subject {
    color: #1E1133 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 800 !important;
}

.am-helpdesk-ticket-mask {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 8px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    background: rgba(124, 58, 237, 0.08) !important;
    border: 1px solid rgba(124, 58, 237, 0.12) !important;
    color: #7C3AED !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    font-family: 'DM Sans', sans-serif !important;
}

/* ------------------------------------------------------------
   TICKET ACTIONS
   ------------------------------------------------------------ */
.am-helpdesk-ticket-actions-container {
    padding: 18px 20px 0 20px !important;
}

.am-helpdesk-ticket-actions {
    list-style: none !important;
    display: flex !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 0 18px 0 !important;
    flex-wrap: wrap !important;
}

.am-helpdesk-ticket-action {
    margin: 0 !important;
    padding: 0 !important;
}

.am-helpdesk-ticket-action a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #4A3D63 !important;
    background: #F5F3FF !important;
    border: 1px solid rgba(139, 92, 246, 0.10) !important;
    transition: all 0.25s ease !important;
}

.am-helpdesk-ticket-action a:hover {
    color: #1E1133 !important;
    background: #EDE9FE !important;
    transform: translateY(-1px) !important;
}

.am-helpdesk-action-active a,
.am-helpdesk-ticket-action-reply a {
    background: linear-gradient(135deg, #7C3AED, #8B5CF6) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.18) !important;
}

.am-helpdesk-ticket-action-fold-all a,
.am-helpdesk-message-action-fold a {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
}

/* ------------------------------------------------------------
   REPLY PANEL
   ------------------------------------------------------------ */
.am-helpdesk-reply-panel {
    background: linear-gradient(135deg, #FAF8FF, #F5F3FF) !important;
    border: 1px solid rgba(139, 92, 246, 0.08) !important;
    border-radius: 18px !important;
    padding: 16px !important;
    margin-bottom: 18px !important;
}

.am-helpdesk-reply-panel-tools {
    margin-bottom: 12px !important;
}

.am-helpdesk-reply-panel-tool-emoji {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.am-helpdesk-reply-panel-tool-emoji-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    border: 1px solid rgba(139, 92, 246, 0.08) !important;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.04) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.am-helpdesk-reply-panel-tool-emoji-item:hover {
    transform: translateY(-1px) !important;
    background: #F5F3FF !important;
    border-color: rgba(124, 58, 237, 0.18) !important;
}

/* ------------------------------------------------------------
   MESSAGES / CONVERSATION
   ------------------------------------------------------------ */
.am-helpdesk-message {
    margin-top: 18px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(139, 92, 246, 0.08) !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.04) !important;
    background: #ffffff !important;
}

.am-helpdesk-message-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    padding: 16px 18px !important;
    background: #FAF8FF !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.08) !important;
    color: #4A3D63 !important;
    font-size: 14px !important;
}

.am-helpdesk-message-author {
    color: #1E1133 !important;
    font-weight: 700 !important;
}

.am-helpdesk-message-date {
    color: #7C6B9E !important;
    font-size: 13px !important;
}

.am-helpdesk-message-preview {
    color: #8B7AA8 !important;
    font-size: 13px !important;
}

.am-helpdesk-message-content {
    padding: 18px !important;
    background: #ffffff !important;
}

.am-helpdesk-message-content pre {
    margin: 0 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #1E1133 !important;
    background: transparent !important;
}

.am-helpdesk-message-actions {
    padding: 0 18px 14px 18px !important;
}

/* Outbound message subtle accent */
.am-helpdesk-message-outbound {
    border-left: 4px solid #8B5CF6 !important;
}

/* ------------------------------------------------------------
   TICKETS TABLE
   ------------------------------------------------------------ */
.am-grid-container {
    padding: 0 !important;
    overflow: hidden !important;
}

.am-grid {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    font-family: 'DM Sans', sans-serif !important;
}

.am-grid thead {
    background: linear-gradient(135deg, #1A0836, #5B21B6) !important;
}

.am-grid thead th {
    padding: 18px 18px !important;
    border: none !important;
    text-align: left !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
}

.am-grid thead th a,
.am-grid thead th .a-sort,
.am-grid thead th span {
    color: #ffffff !important;
    text-decoration: none !important;
}

.am-grid tbody td {
    padding: 18px !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.08) !important;
    color: #1E1133 !important;
    font-size: 15px !important;
    vertical-align: middle !important;
    background: #ffffff !important;
}

.am-grid tbody tr:hover td {
    background: rgba(124, 58, 237, 0.025) !important;
}

.am-helpdesk-grid-subject a {
    color: #1E1133 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.am-helpdesk-grid-subject a:hover {
    color: #7C3AED !important;
}

.am-helpdesk-grid-msg-cnt {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 8px !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    background: rgba(124, 58, 237, 0.08) !important;
    color: #7C3AED !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.am-helpdesk-grid-msg {
    display: inline-block !important;
    margin-left: 8px !important;
    color: #7C6B9E !important;
    font-size: 13px !important;
}

.am-grid tbody time {
    color: #4A3D63 !important;
    font-weight: 600 !important;
}

/* Status icon cell */
.am-grid .glyph.sprite-icon {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 999px !important;
    background-color: #7C3AED !important;
    box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.10) !important;
}

/* ------------------------------------------------------------
   LINKS
   ------------------------------------------------------------ */
.am-helpdesk a,
.am-grid-wrap#grid-user a,
.am-grid-container a {
    transition: all 0.2s ease !important;
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 991px) {
    .am-grid-wrap#grid-user {
        padding: 22px !important;
        border-radius: 20px !important;
    }

    .am-grid-wrap#grid-user > h1,
    .am-grid-title {
        font-size: 24px !important;
    }

    .am-helpdesk {
        padding: 20px !important;
        border-radius: 20px !important;
    }
}

@media (max-width: 767px) {
    .am-grid-wrap#grid-user {
        padding: 18px !important;
        margin-bottom: 18px !important;
        border-radius: 18px !important;
    }

    .am-grid-wrap#grid-user > h1,
    .am-grid-title {
        font-size: 22px !important;
    }

    .am-helpdesk {
        padding: 16px !important;
        border-radius: 18px !important;
    }

    .am-helpdesk-ticket-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .am-helpdesk-ticket-actions {
        gap: 8px !important;
    }

    .am-helpdesk-ticket-action a {
        padding: 9px 14px !important;
        font-size: 13px !important;
    }

    #signup-page .am-helpdesk-form .group {
        flex-direction: column !important;
    }

    #signup-page .am-helpdesk-form input[type="submit"],
    #signup-page .am-helpdesk-form input[type="button"] {
        width: 100% !important;
    }

    .am-grid-container {
        overflow-x: auto !important;
    }

    .am-grid {
        min-width: 640px !important;
    }

    .am-grid thead th,
    .am-grid tbody td {
        padding: 14px !important;
        font-size: 14px !important;
    }

    .am-helpdesk-message-header,
    .am-helpdesk-message-content {
        padding: 14px !important;
    }
}

@media (max-width: 480px) {
    .am-grid-wrap#grid-user > h1,
    .am-grid-title {
        font-size: 20px !important;
    }

    .am-grid-title-desc__total {
        font-size: 12px !important;
        padding: 5px 10px !important;
    }

    #signup-page .am-helpdesk-form input[type="text"],
    #signup-page .am-helpdesk-form textarea {
        font-size: 14px !important;
        padding: 14px !important;
    }

    .am-helpdesk-reply-panel {
        padding: 14px !important;
        border-radius: 16px !important;
    }

    .am-helpdesk-message {
        border-radius: 16px !important;
    }
}

.am-support-notice {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px;
    border-radius: 18px;
    background: linear-gradient(135deg, #F5F3FF, #EDE9FE);
    border: 1px solid rgba(139, 92, 246, 0.10);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.06);
    font-family: 'DM Sans', sans-serif;
}

.am-support-notice__icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #7C3AED, #8B5CF6);
    color: #fff;
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.18);
}

.am-support-notice__title {
    margin: 0 0 6px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #1E1133;
}

.am-support-notice__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #4A3D63;
}

.am-support-notice__text strong {
    color: #1E1133;
    font-weight: 700;
}

.am-support-notice__text a {
    color: #7C3AED;
    font-weight: 700;
    text-decoration: none;
}

.am-support-notice__text a:hover {
    color: #6B21A8;
    text-decoration: underline;
}

@media (max-width: 480px) {
    .am-support-notice {
        padding: 16px;
        border-radius: 16px;
    }

    .am-support-notice__title {
        font-size: 16px;
    }

    .am-support-notice__text {
        font-size: 13px;
    }
}

/* ============================================================
   CUSTOMER PROFILE PAGE
   Premium purple theme matching signup/auth pages
   ============================================================ */

/* Page spacing */
.page-body.am-body-content {
    padding-top: 8px;
    padding-bottom: 40px;
}

.page-header {
    margin-bottom: 24px;
}

.page-header .page-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #1E1133 !important;
    margin: 0 !important;
    letter-spacing: -0.5px;
}

/* Empty breadcrumbs */
.am-breadcrumbs {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* ============================================================
   PROFILE FORM WRAPPER
   ============================================================ */
#signup-page .am-form {
    margin: 0 !important;
}

#signup-page .am-form form.am-profile-form {
    background: #ffffff !important;
    border: 1px solid rgba(139, 92, 246, 0.08) !important;
    border-radius: 24px !important;
    padding: 32px !important;
    box-shadow: 0 10px 30px rgba(124, 58, 237, 0.06) !important;
    position: relative;
    overflow: hidden;
}

#signup-page .am-form form.am-profile-form::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(135deg, #7C3AED, #8B5CF6, #A78BFA);
}

/* ============================================================
   FORM ROWS
   ============================================================ */
#signup-page .am-profile-form .am-row {
    display: block !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

#signup-page .am-profile-form .am-row:last-of-type {
    margin-bottom: 0 !important;
}

/* Labels */
#signup-page .am-profile-form .am-element-title {
    width: 100% !important;
    float: none !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
}

#signup-page .am-profile-form .am-element-title label {
    display: inline-block !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1E1133 !important;
    line-height: 1.4 !important;
}

#signup-page .am-profile-form .am-element-title .required {
    color: #7C3AED !important;
    font-weight: 800 !important;
}

/* Helper text */
#signup-page .am-profile-form .am-element-title .comment {
    margin-top: 6px !important;
    color: #7C6B9E !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-family: 'DM Sans', sans-serif !important;
}

/* Input wrapper */
#signup-page .am-profile-form .am-element {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ============================================================
   NAME GROUP (FIRST + LAST NAME)
   ============================================================ */
#signup-page .am-profile-form .am-element.group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px !important;
    align-items: stretch;
}

/* ============================================================
   INPUTS
   ============================================================ */
#signup-page .am-profile-form input[type="text"],
#signup-page .am-profile-form input[type="email"],
#signup-page .am-profile-form input[type="password"] {
    width: 100% !important;
    height: auto !important;
    padding: 15px 16px !important;
    border: 2px solid #EDE9FE !important;
    border-radius: 14px !important;
    background: #F5F3FF !important;
    color: #1E1133 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    font-family: 'DM Sans', sans-serif !important;
    box-shadow: none !important;
    transition: all 0.25s ease !important;
}

#signup-page .am-profile-form input[type="text"]::placeholder,
#signup-page .am-profile-form input[type="email"]::placeholder,
#signup-page .am-profile-form input[type="password"]::placeholder {
    color: #9C8AB8 !important;
    font-weight: 500 !important;
}

#signup-page .am-profile-form input[type="text"]:focus,
#signup-page .am-profile-form input[type="email"]:focus,
#signup-page .am-profile-form input[type="password"]:focus {
    outline: none !important;
    border-color: #A78BFA !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.10) !important;
}

/* ============================================================
   PASSWORD CHANGE TOGGLE ROW
   ============================================================ */
#signup-page #row-qfauto-1 {
    background: linear-gradient(135deg, #FAF8FF, #F5F3FF) !important;
    border: 1px solid rgba(139, 92, 246, 0.08) !important;
    border-radius: 18px !important;
    padding: 18px 20px !important;
    margin-top: 8px !important;
}

#signup-page #row-qfauto-1 .am-element-title {
    margin-bottom: 8px !important;
}

#signup-page #row-qfauto-1 .am-element {
    display: flex !important;
    align-items: center !important;
}

#signup-page .am-change-pass-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    border-radius: 10px !important;
    background: rgba(124, 58, 237, 0.08) !important;
    border: 1px solid rgba(124, 58, 237, 0.14) !important;
    color: #7C3AED !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

#signup-page .am-change-pass-toggle:hover {
    background: rgba(124, 58, 237, 0.14) !important;
    border-color: rgba(124, 58, 237, 0.22) !important;
    color: #6B21A8 !important;
    transform: translateY(-1px) !important;
}

/* ============================================================
   HIDDEN PASSWORD ROWS WHEN REVEALED
   ============================================================ */
#signup-page #row-_oldpass-0,
#signup-page #row-pass-0,
#signup-page #row-pass-confirm {
    background: #ffffff !important;
    border: 1px solid rgba(139, 92, 246, 0.08) !important;
    border-radius: 18px !important;
    padding: 18px 20px !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.04) !important;
}

/* ============================================================
   SUBMIT BUTTON
   ============================================================ */
#signup-page #row-_submit_-0 {
    margin-top: 32px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(139, 92, 246, 0.08) !important;
}

#signup-page #row-_submit_-0 .am-element {
    display: flex !important;
    justify-content: flex-start !important;
}

#signup-page .am-cta-profile,
#signup-page #_submit_-0,
#signup-page .am-profile-form input[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 200px !important;
    padding: 16px 28px !important;
    border: none !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #7C3AED, #8B5CF6) !important;
    color: #ffffff !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.24) !important;
    cursor: pointer !important;
    transition: all 0.28s ease !important;
}

#signup-page .am-cta-profile:hover,
#signup-page #_submit_-0:hover,
#signup-page .am-profile-form input[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(124, 58, 237, 0.32) !important;
    background: linear-gradient(135deg, #6B21A8, #7C3AED) !important;
}

/* ============================================================
   VALIDATION ERRORS
   ============================================================ */
#signup-page .am-profile-form span.am-error {
    display: block !important;
    margin-top: 8px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    background: rgba(239, 68, 68, 0.06) !important;
    border: 1px solid rgba(239, 68, 68, 0.12) !important;
    color: #B91C1C !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
    font-family: 'DM Sans', sans-serif !important;
}

/* Error state input */
#signup-page .am-profile-form input.am-error,
#signup-page .am-profile-form input[type="text"].am-error,
#signup-page .am-profile-form input[type="email"].am-error,
#signup-page .am-profile-form input[type="password"].am-error {
    border-color: rgba(239, 68, 68, 0.45) !important;
    background: #fffafa !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.06) !important;
}

/* ============================================================
   OPTIONAL: NICE SPACING FOR THE FIRST ROW
   ============================================================ */
#signup-page #row-name-0 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    .page-header .page-title {
        font-size: 28px !important;
    }

    #signup-page .am-form form.am-profile-form {
        padding: 24px !important;
        border-radius: 20px !important;
    }
}

@media (max-width: 767px) {
    .page-header {
        margin-bottom: 18px;
    }

    .page-header .page-title {
        font-size: 24px !important;
    }

    #signup-page .am-form form.am-profile-form {
        padding: 20px !important;
    }

    #signup-page .am-profile-form .am-element.group {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    #signup-page #row-qfauto-1,
    #signup-page #row-_oldpass-0,
    #signup-page #row-pass-0,
    #signup-page #row-pass-confirm {
        padding: 16px !important;
        border-radius: 16px !important;
    }

    #signup-page .am-cta-profile,
    #signup-page #_submit_-0,
    #signup-page .am-profile-form input[type="submit"] {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 480px) {
    .page-header .page-title {
        font-size: 22px !important;
    }

    #signup-page .am-form form.am-profile-form {
        padding: 18px !important;
        border-radius: 18px !important;
    }

    #signup-page .am-profile-form input[type="text"],
    #signup-page .am-profile-form input[type="email"],
    #signup-page .am-profile-form input[type="password"] {
        padding: 14px 14px !important;
        font-size: 14px !important;
    }
}




/* ============================================================
   THANK YOU PAGE / PAYMENT SUCCESS / RECEIPT
   Matches your purple premium theme
   ============================================================ */

/* Page spacing */
.page-body.am-body-content {
    padding-top: 8px;
    padding-bottom: 40px;
}

/* Header area */
.page-header {
    margin-bottom: 24px;
}

.page-header .row {
    align-items: center;
}

.page-header .page-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #1E1133 !important;
    margin: 0 !important;
    letter-spacing: -0.5px;
}

/* Empty breadcrumbs cleanup */
.am-breadcrumbs {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Main page wrapper feel */
.row.row-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ============================================================
   SUCCESS MESSAGE
   ============================================================ */
.am-thanks-status-success {
    position: relative;
    padding: 18px 22px 18px 56px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #F5F3FF, #EDE9FE) !important;
    border: 2px solid rgba(124, 58, 237, 0.10) !important;
    box-shadow: 0 6px 24px rgba(124, 58, 237, 0.06) !important;
    color: #1E1133 !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

.am-thanks-status-success::before {
    content: "✓";
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: linear-gradient(135deg, #7C3AED, #8B5CF6);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.25);
}

/* ============================================================
   PAYMENT DETAILS BOX
   ============================================================ */
.am-thanks-payment-details {
    background: #ffffff !important;
    border: 1px solid rgba(139, 92, 246, 0.08) !important;
    border-radius: 20px !important;
    padding: 24px 28px !important;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.05) !important;
    color: #4A3D63 !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.9 !important;
    margin: 0 !important;
}

.am-thanks-payment-details strong {
    color: #1E1133 !important;
    font-weight: 700 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* ============================================================
   RECEIPT WRAPPER
   ============================================================ */
.am-receipt {
    background: #ffffff !important;
    border: 1px solid rgba(139, 92, 246, 0.08) !important;
    border-radius: 24px !important;
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.06) !important;
    overflow: hidden !important;
    margin: 0 !important;
}

.am-receipt-content {
    padding: 0 !important;
}

/* ============================================================
   RECEIPT TABLE
   ============================================================ */
.am-receipt-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    font-family: 'DM Sans', sans-serif !important;
    background: #fff !important;
}

/* Table head */
.am-receipt-table thead {
    background: linear-gradient(135deg, #1A0836, #5B21B6) !important;
}

.am-receipt-table thead th {
    padding: 18px 20px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-align: left !important;
    border: none !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    letter-spacing: 0.2px;
}

.am-receipt-table thead th.am-receipt-qty,
.am-receipt-table thead th.am-receipt-unit-price,
.am-receipt-table thead th.am-receipt-price {
    text-align: center !important;
}

/* Body rows */
.am-receipt-table tbody tr:not(.am-receipt-row-delimiter):not(.am-receipt-row-total):not(.am-receipt-row-terms) td {
    padding: 18px 20px !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.08) !important;
    color: #1E1133 !important;
    font-size: 15px !important;
    vertical-align: middle !important;
    background: #fff !important;
}

.am-receipt-table tbody tr:hover td {
    background: rgba(124, 58, 237, 0.025) !important;
}

/* Product cell */
.am-receipt-table td:first-child {
    font-weight: 600 !important;
    color: #1E1133 !important;
}

/* Qty / prices */
.am-receipt-qty,
.am-receipt-unit-price,
.am-receipt-price {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.am-receipt-price {
    font-weight: 700 !important;
    color: #4A3D63 !important;
}

/* Options under product */
.am-receipt-product-options {
    margin-top: 6px !important;
    color: #7C6B9E !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* Divider row */
.am-receipt-row-delimiter td {
    padding: 0 !important;
    height: 14px !important;
    border: none !important;
    background: linear-gradient(180deg, rgba(245,243,255,0.75), rgba(255,255,255,1)) !important;
}

/* Indent cell */
.am-receipt-indent {
    width: 1% !important;
    background: transparent !important;
    border: none !important;
}

/* Subtotal row */
.am-receipt-table tbody tr td.am-receipt-total {
    padding: 16px 20px !important;
    background: #FAF8FF !important;
    border-top: 1px solid rgba(139, 92, 246, 0.08) !important;
    border-bottom: none !important;
    color: #1E1133 !important;
    font-size: 15px !important;
}

.am-receipt-table tbody tr td.am-receipt-total strong {
    font-weight: 700 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* Total row */
.am-receipt-row-total td {
    padding: 18px 20px !important;
    background: linear-gradient(135deg, #F5F3FF, #EDE9FE) !important;
    border-top: 1px solid rgba(139, 92, 246, 0.08) !important;
    border-bottom: none !important;
}

.am-receipt-row-total .am-receipt-total strong {
    color: #1E1133 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.am-receipt-row-total .am-receipt-price strong {
    color: #7C3AED !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -0.4px;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* Subscription terms */
.am-receipt-row-terms td {
    padding: 18px 20px !important;
    background: #ffffff !important;
    border-top: 1px solid rgba(139, 92, 246, 0.08) !important;
    color: #4A3D63 !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
}

.am-receipt-terms strong {
    color: #1E1133 !important;
    font-weight: 700 !important;
}

/* ============================================================
   LOGIN OFFER / MEMBER AREA CTA
   ============================================================ */
.am-thanks-login-offer {
    background: linear-gradient(135deg, #1A0836 0%, #2E1065 45%, #7C3AED 100%) !important;
    color: #ffffff !important;
    border-radius: 22px !important;
    padding: 24px 28px !important;
    box-shadow: 0 16px 40px rgba(91, 33, 182, 0.22) !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    position: relative;
    overflow: hidden;
}

.am-thanks-login-offer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255,255,255,0.15), transparent 40%);
    pointer-events: none;
}

.am-thanks-login-offer strong {
    position: relative;
    z-index: 1;
    font-weight: 600 !important;
}

.am-thanks-login-offer a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 6px !important;
    padding: 8px 16px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    transition: all 0.25s ease !important;
    position: relative;
    z-index: 1;
}

.am-thanks-login-offer a:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    .page-header .page-title {
        font-size: 28px !important;
    }

    .am-thanks-payment-details,
    .am-thanks-login-offer {
        padding: 20px 22px !important;
    }
}

@media (max-width: 767px) {
    .page-header {
        margin-bottom: 18px;
    }

    .page-header .page-title {
        font-size: 24px !important;
    }

    .row.row-cards {
        gap: 16px;
    }

    .am-thanks-status-success {
        padding: 16px 18px 16px 50px !important;
        font-size: 15px !important;
    }

    .am-thanks-status-success::before {
        left: 16px;
        width: 24px;
        height: 24px;
        font-size: 14px;
    }

    .am-thanks-payment-details {
        padding: 18px 18px !important;
        font-size: 14px !important;
        line-height: 1.8 !important;
    }

    .am-receipt {
        border-radius: 18px !important;
        overflow-x: auto !important;
    }

    .am-receipt-table {
        min-width: 680px !important;
    }

    .am-receipt-table thead th,
    .am-receipt-table tbody td {
        padding: 14px 14px !important;
        font-size: 14px !important;
    }

    .am-receipt-row-total .am-receipt-price strong {
        font-size: 19px !important;
    }

    .am-thanks-login-offer {
        padding: 20px 18px !important;
        font-size: 15px !important;
    }

    .am-thanks-login-offer a {
        margin-top: 10px !important;
        margin-left: 0 !important;
    }
}

@media (max-width: 480px) {
    .page-header .page-title {
        font-size: 22px !important;
    }

    .am-thanks-status-success {
        border-radius: 16px !important;
    }

    .am-thanks-payment-details,
    .am-thanks-login-offer,
    .am-receipt {
        border-radius: 16px !important;
    }
}

.am-block.am-thanks-login-details {
    background: linear-gradient(135deg, #1A0836 0%, #2E1065 45%, #7C3AED 100%) !important;
}



/* ============================================================
   PAYMENT HISTORY PAGE — HIDE DEFAULT SUBSCRIPTION TEXT
   ============================================================ */

/* Hide the "Your Subscriptions" block on payment-history page */
#am-block-active-subscriptions {
    display: none !important;
}

/* Also hide the default Payments History heading */
#am-block-payments > h1 {
    display: none !important;
}

/* Hide default payment table (we have our own) */
#am-block-payments > .am-grid-container {
    display: none !important;
}

/* Hide default no-data block */
#am-block-payments > .am-block-nodata {
    display: none !important;
}
/* ============================================================
   SIGNUP PAGE — LOGIN MESSAGES & GOOGLE BUTTON
   Add this to your custom.css
   ============================================================ */

/* "You are logged-in as demo. Logout to signup" message */
.am-info.am-login-text {
    background: linear-gradient(135deg, #F5F3FF, #EDE9FE) !important;
    border: 2px solid rgba(139, 92, 246, .12) !important;
    border-radius: 16px !important;
    padding: 18px 24px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #4A3D63 !important;
    font-family: 'DM Sans', sans-serif !important;
    margin: 0 0 20px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    box-shadow: 0 2px 8px rgba(124, 58, 237, .04) !important;
}

.am-info.am-login-text strong {
    color: #7C3AED !important;
    font-weight: 700 !important;
}

.am-info.am-login-text a {
    color: #7C3AED !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    padding: 4px 14px !important;
    border-radius: 8px !important;
    background: rgba(124, 58, 237, .08) !important;
    border: 1px solid rgba(124, 58, 237, .15) !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
}

.am-info.am-login-text a:hover {
    background: rgba(124, 58, 237, .15) !important;
    border-color: rgba(124, 58, 237, .25) !important;
    color: #6B21A8 !important;
    transform: translateY(-1px) !important;
}

/* Google Sign-In button wrapper on signup */
.am-google-button-wrapper,
.am-google-login-form-before {
    display: flex !important;
    justify-content: center !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
}

.am-google-button-wrapper .am-google-button,
.am-google-login-form-before .am-google-button {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 400px !important;
}

.am-google-button-wrapper .am-google-button a,
.am-google-login-form-before .am-google-button a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 14px 24px !important;
    border: 2px solid #EDE9FE !important;
    border-radius: 14px !important;
    background: #fff !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04) !important;
}

.am-google-button-wrapper .am-google-button a:hover,
.am-google-login-form-before .am-google-button a:hover {
    border-color: #A78BFA !important;
    box-shadow: 0 4px 16px rgba(124, 58, 237, .1) !important;
    transform: translateY(-2px) !important;
}

/* Fix the broken Google image — hide default and use better styling */
.am-google-button-wrapper .am-google-button a img,
.am-google-login-form-before .am-google-button a img {
    max-height: 40px !important;
    width: auto !important;
    border-radius: 4px !important;
}

/* If Google image is broken (empty base64), hide it and show text */
.am-google-button-wrapper .am-google-button a img[src="data:image/png;base64,"],
.am-google-login-form-before .am-google-button a img[src="data:image/png;base64,"] {
    display: none !important;
}

/* Container that wraps login text + google button — clean spacing */
.am-signup > .am-info:first-child,
.am-signup > div:first-child {
    margin-bottom: 16px !important;
}

/* "If you already have an account" — same styling as logged-in message */
.am-info.am-login-text .ajax-link {
    color: #7C3AED !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    padding: 4px 14px !important;
    border-radius: 8px !important;
    background: rgba(124, 58, 237, .08) !important;
    border: 1px solid rgba(124, 58, 237, .15) !important;
    transition: all 0.25s ease !important;
}

.am-info.am-login-text .ajax-link:hover {
    background: rgba(124, 58, 237, .15) !important;
    border-color: rgba(124, 58, 237, .25) !important;
    color: #6B21A8 !important;
}


/* ============================================================
   SIGNUP PAGE — INVOICE SUMMARY TABLE
   Add this to your custom.css
   ============================================================ */

.am-invoice-summary-items {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: linear-gradient(135deg, #F5F3FF, #EDE9FE) !important;
    border: 2px solid rgba(139, 92, 246, .1) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(124, 58, 237, .06) !important;
    font-family: 'DM Sans', sans-serif !important;
    margin: 20px 0 !important;
}

/* Individual product rows */
.am-invoice-summary-item td {
    padding: 16px 24px !important;
    border-bottom: 1px solid rgba(139, 92, 246, .08) !important;
    font-size: 15px !important;
    color: #1E1133 !important;
    background: transparent !important;
}

.am-invoice-summary-item:last-of-type td,
.am-invoice-summary-item-last td {
    border-bottom: none !important;
}

/* Item number badge */
.am-invoice-summary-item-num {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 8px !important;
    background: rgba(124, 58, 237, .1) !important;
    color: #7C3AED !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin-right: 10px !important;
}

/* Product title */
.am-invoice-summary-item-title {
    font-weight: 600 !important;
    color: #1E1133 !important;
    font-size: 15px !important;
}

/* Price column */
.am-invoice-summary-price {
    text-align: right !important;
    font-weight: 700 !important;
    color: #4A3D63 !important;
    font-size: 15px !important;
    white-space: nowrap !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* Divider row */
.am-invoice-summary-delimeter td {
    padding: 0 24px !important;
    border-bottom: none !important;
    background: transparent !important;
}

.am-invoice-summary-delimeter hr {
    border: none !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, rgba(124, 58, 237, .2), transparent) !important;
    margin: 4px 0 !important;
}

/* Total row */
.am-invoice-summary-row-total td {
    padding: 16px 24px !important;
    background: rgba(124, 58, 237, .06) !important;
    border-bottom: none !important;
}

.am-invoice-summary-row-total .am-invoice-summary-total strong {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1E1133 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.am-invoice-summary-row-total .am-invoice-summary-price strong {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #7C3AED !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    letter-spacing: -.5px !important;
}

/* Hover effect on product rows */
.am-invoice-summary-item:hover td {
    background: rgba(124, 58, 237, .03) !important;
}

/* Responsive */
@media (max-width: 480px) {
    .am-invoice-summary-items {
        border-radius: 14px !important;
    }
    .am-invoice-summary-item td {
        padding: 12px 16px !important;
        font-size: 14px !important;
    }
    .am-invoice-summary-row-total td {
        padding: 14px 16px !important;
    }
    .am-invoice-summary-row-total .am-invoice-summary-price strong {
        font-size: 18px !important;
    }
}



/* ============================================================
   SIGNUP PAGE — GOOGLE SIGN-IN BUTTON FIX
   Add this to your custom.css
   ============================================================ */

/* Hide the broken image completely */
.am-google-button a img,
.am-google-button-wrapper a img {
    display: none !important;
}

/* Style the link itself as the button */
.am-google-button a,
.am-google-button-wrapper .am-google-button a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    padding: 15px 24px !important;
    border: 2px solid #EDE9FE !important;
    border-radius: 14px !important;
    background: #fff !important;
    text-decoration: none !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1E1133 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04) !important;
    border-bottom: 2px solid #EDE9FE !important;
}

.am-google-button a:hover,
.am-google-button-wrapper .am-google-button a:hover {
    border-color: #A78BFA !important;
    box-shadow: 0 6px 20px rgba(124, 58, 237, .1) !important;
    transform: translateY(-2px) !important;
    border-bottom-color: #A78BFA !important;
}

/* Google icon using ::before */
.am-google-button a::before,
.am-google-button-wrapper .am-google-button a::before {
    content: '' !important;
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFC107' d='M43.6 20.5H42V20H24v8h11.3C34 31.7 29.5 35 24 35c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.3 0 6.3 1.2 8.6 3.2l5.7-5.7C34.8 3 29.7 1 24 1 11.8 1 2 10.8 2 23s9.8 22 22 22 21-9.8 21-22c0-1.4-.1-2.4-.4-3.5z'/%3E%3Cpath fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.6 16.5 18.9 13 24 13c3.3 0 6.3 1.2 8.6 3.2l5.7-5.7C34.8 3 29.7 1 24 1 16.1 1 9.2 5.5 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 45c5.4 0 10.3-1.8 14.1-4.9l-6.5-5.3C29.5 35 26.9 36 24 36c-5.4 0-10-3.5-11.6-8.4l-6.6 5.1C8.7 40.6 15.8 45 24 45z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.5H42V20H24v8h11.3c-1.1 3.3-3.7 6-7.2 6l6.5 5.3c-.5.3 8.5-5.6 8.5-17.3 0-1.4-.1-2.4-.4-3.5z'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* "Sign in with Google" text using ::after */
.am-google-button a::after,
.am-google-button-wrapper .am-google-button a::after {
    content: 'Sign in with Google' !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1E1133 !important;
}

/* Center the wrapper */
.am-google-button-wrapper,
.am-google-login-form-before {
    display: flex !important;
    justify-content: center !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
}

.am-google-button {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

/* Responsive */
@media (max-width: 480px) {
    .am-google-button a,
    .am-google-button-wrapper .am-google-button a {
        max-width: 100% !important;
        padding: 13px 20px !important;
        font-size: 14px !important;
    }
}
/* ============================================================
   GENERAL
   ============================================================ */
body {
    background-color: #FAF8FF;
    color: #1E1133;
    margin: 0;
    padding: 0;
}

h2.page-title {
    color: #1E1133;
    font-size: 28px;
    font-weight: 700;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

h2#member-main-resources-head {
    color: #1E1133;
    font-size: 28px;
    font-weight: 700;
}

/* ============================================================
   GOOGLE AUTH / SOCIAL LOGIN
   ============================================================ */
.am-google-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin: 24px 0;
}

.am-auth-separator {
    width: 100%;
    height: 1px;
    background: #EDE9FE;
    border-radius: 999px;
}

.am-google-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 280px;
    padding: 14px 22px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    background: linear-gradient(135deg, #7C3AED, #8B5CF6);
    color: #fff;
    border: none;
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.am-google-btn__icon {
    display: inline-flex;
    background: #fff;
    border-radius: 50%;
    padding: 4px;
}

.am-google-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(124, 58, 237, 0.35);
}

/* ============================================================
   FORMS
   ============================================================ */
.am-form form {
    padding: 2em;
    border-radius: 16px;
    background: white;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(139, 92, 246, 0.06);
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar-expand-md .navbar-collapse.show {
    flex-direction: column;
    z-index: 10;
    background: #fff;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.12);
    border-radius: 0 0 16px 16px;
}

/* ============================================================
   SEARCH INPUT
   ============================================================ */
input#resourcesSearchInput {
    border: 2px solid #EDE9FE;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    padding: 14px 20px 14px 48px;
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    background: #F5F3FF;
    transition: all 0.3s ease;
}

input#resourcesSearchInput:focus {
    outline: none;
    border-color: #A78BFA;
    background: white;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
}

/* ============================================================
   SUBSCRIPTIONS / LAYOUT
   ============================================================ */
div#member-main-subscriptions {
    background: transparent;
    border-radius: 0;
    border: none;
    box-shadow: none;
    padding: 0;
}

.am-layout-two-coll {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.nav-link-icon {
    margin-right: 0.5em;
}

.am-footer-links ul li {
    display: inline-block;
    list-style: none;
    margin-right: 15px;
}

#widget-member-main-links {
    display: none;
}

#widget-member-main-subscriptions #member-main-subscriptions-head {
    display: none;
}

#member-main-subscriptions {
    margin-bottom: 0;
}

.page-body {
    margin-top: 0;
}

.am-form div.am-element-title .comment {
    font-size: 0.8rem;
    color: #7C6B9E;
}

.am-layout-two-coll,
.am-layout-two-coll .am-layout-two-coll-top,
.am-layout-two-coll .am-layout-two-coll-bottom {
    background: transparent !important;
    padding: 0;
    margin: 0;
    border: 0;
    box-shadow: none;
}

.am-layout-two-coll .am-coll-left .am-coll-content {
    margin: 0;
}

.am-footer-links ul li a {
    text-decoration: none;
    color: #4A3D63;
    font-weight: 500;
    transition: color 0.2s ease;
}

.am-footer-links ul li a:hover {
    color: #7C3AED;
}

/* ============================================================
   AUTH — LOGIN / SIGNUP FORMS
   ============================================================ */
.sb-theme-auth .auth-logo {
    text-align: center;
    margin: 0;
}

.sb-theme-auth .auth-logo img {
    max-width: 200px;
}

.sb-theme-auth .am-auth-form form legend {
    display: none;
}

.sb-theme-auth .am-form div.am-element {
    margin-left: 0;
    padding: 0;
    display: block;
}

.sb-theme-auth .am-form div.am-element-title {
    width: 100%;
    float: none;
    text-align: left;
    padding: 0;
    font-weight: 600;
    font-size: 14px;
    color: #1E1133;
    margin-bottom: 8px;
}

.sb-theme-auth .am-auth-form div.am-row div.am-element-title {
    padding-right: 0;
    padding-left: 0;
}

.sb-theme-auth .am-auth-form div.am-row div.am-element {
    padding-left: 0;
}

.sb-theme-auth .am-form fieldset {
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
    background: transparent;
}

.sb-theme-auth .am-row.am-row-login-pass {
    display: block;
    margin: 0 0 24px;
}

.sb-theme-auth .am-row.am-row-buttons {
    display: block;
    margin: 0;
}

.sb-theme-auth .am-row.am-row-buttons input {
    display: block;
    margin: 0;
    width: 100%;
    border-radius: 14px;
    padding: 16px;
    background: linear-gradient(135deg, #7C3AED, #8B5CF6);
    border: none;
    color: white;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
    cursor: pointer;
}

.sb-theme-auth .am-row.am-row-buttons input:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
}

.sb-theme-auth .am-row.am-row-buttons .am-form-login-switch-wrapper {
    display: block;
    margin: 24px 0 0;
    text-align: center;
}

.am-credits {
    margin-top: 1em;
    color: #7C6B9E;
    text-align: center;
    font-size: 0.8rem;
    opacity: 0.8;
    height: auto;
    margin-bottom: 1em;
}

.navbar-brand-image {
    height: 3rem;
    width: auto;
}

.am-footer-links {
    flex-grow: 1;
}

.am-footer-links ul {
    margin: 0px;
}

.am-footer-sm a {
    font-size: 1rem;
    padding: 0 5px;
    color: #7C6B9E;
    transition: color 0.2s ease;
}

.am-footer-sm a:hover {
    color: #7C3AED;
}

.am-login-form-wrapper {
    margin-top: 0px;
}

.am-auth-form {
    width: 100%;
}

.am-auth-form div.am-row {
    background: transparent;
    border-bottom: none;
    padding: 0;
    margin: 0 0 24px;
}

.am-auth-form.am-form fieldset legend {
    display: none;
}

.am-auth-form .am-row {
    display: block;
    padding: 0;
}

.am-auth-form .am-row .am-element-title {
    padding: 0px;
    width: 100%;
    text-align: left;
    float: none;
    margin: 0 0 8px 0;
    font-weight: 600;
    font-size: 14px;
    font-family: 'DM Sans', sans-serif;
    color: #1E1133;
}

.am-auth-form .am-row .am-element {
    padding: 0px;
    float: none;
    width: 100%;
    margin: 0px;
}

.am-auth-form .am-row.am-row-buttons {
    margin-bottom: 0;
}

.am-auth-form .am-row.am-row-buttons .am-element input {
    display: block;
    width: 100%;
    border-radius: 14px;
    padding: 16px;
    background: linear-gradient(135deg, #7C3AED, #8B5CF6);
    border: none;
    color: white;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
    cursor: pointer;
}

.am-auth-form .am-row.am-row-buttons .am-element input:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
}

.am-auth-form .am-row.am-row-buttons .am-element span {
    display: block;
    margin-top: 24px;
    font-size: 14px;
    color: #7C6B9E;
    text-align: center;
}

.am-signup-link {
    font-size: 14px;
    color: #7C3AED;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.am-signup-link:hover {
    color: #6B21A8;
    text-decoration: underline;
}

.login-logo img {
    max-height: 4rem;
    height: 4rem;
    width: auto;
}

/* ============================================================
   EMPTY / NO DATA STATE
   ============================================================ */
.am-block-nodata {
    text-align: center;
    padding: 80px 20px;
    background: #ffffff;
    font-size: 1.5rem;
    margin-bottom: 0;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.06);
    color: #4A3D63;
}

img.img-non-data {
    max-width: 300px;
    display: block;
    margin: 20px auto;
    opacity: 0.8;
}

/* ============================================================
   RESOURCES WIDGET
   ============================================================ */
#widget-member-main-resources {
    margin: 0;
    padding: 0;
    border-top: none;
    border-bottom: none;
    background-color: transparent;
}

#widget-member-main-resources .am-block {
    background: transparent;
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    padding: 0;
    box-shadow: none;
}

#widget-member-main-resources .am-block ul {
    margin: 0;
    padding: 0;
    display: grid;
    justify-content: space-between;
    grid-gap: 24px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

#widget-member-main-resources .am-block ul.am-widget-list li {
    padding: 0;
    background: transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#widget-member-main-resources .am-block ul.am-widget-list li:hover {
    transform: translateY(-8px);
}

#widget-member-main-resources .product-description {
    min-height: 20px;
    color: #7C6B9E;
    font-size: 14px;
    margin-top: 8px;
    line-height: 1.5;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
    border: 1px solid rgba(139, 92, 246, 0.06);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(124, 58, 237, 0.04);
    transition: all 0.3s ease;
    height: 100%;
    background: white;
}

.card:hover {
    box-shadow: 0 12px 32px rgba(124, 58, 237, 0.12);
    border-color: #A78BFA;
}

.card-body {
    padding: 20px;
}

.card-title {
    color: #1E1133;
    font-weight: 600;
    font-size: 17px;
    margin-bottom: 8px;
}

.card-img-top {
    height: 180px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #F5F3FF;
    padding: 20px;
}

.card-footer {
    padding: 16px 20px;
    background-color: #fff;
    border-top: 1px solid #EDE9FE;
}

.btn-success {
    background: linear-gradient(135deg, #7C3AED, #8B5CF6);
    border: none;
    color: white;
    border-radius: 12px;
    font-weight: 600;
    padding: 10px 18px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.35);
    background: linear-gradient(135deg, #6B21A8, #7C3AED);
}

/* ============================================================
   SUBSCRIPTION WELCOME HERO
   ============================================================ */
.subscription-welcome {
    background: linear-gradient(135deg, #1A0836 0%, #2E1065 35%, #5B21B6 70%, #7C3AED 100%);
    border-radius: 24px;
    padding: 48px;
    position: relative;
    overflow: hidden;
    margin-bottom: 32px;
    box-shadow: 0 20px 60px rgba(91, 33, 182, 0.3);
    color: white;
}

.welcome-title {
    color: white;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 12px 0;
    line-height: 1.2;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.welcome-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 18px;
    margin: 0;
    line-height: 1.6;
    font-style: italic;
}

/* ============================================================
   SEARCH / FILTER
   ============================================================ */
.am-input-filter-wrapper {
    background: white;
    margin-bottom: 32px;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(124, 58, 237, 0.04);
    border: 1px solid rgba(139, 92, 246, 0.06);
}

.am-input-filter-inner-wrapper {
    position: relative;
    max-width: 100%;
    margin: 0;
}

.am-input-filter {
    width: 100%;
    padding: 14px 20px 14px 48px;
    border: 2px solid #EDE9FE;
    border-radius: 14px;
    font-size: 15px;
    background-color: #F5F3FF;
    transition: all 0.3s ease;
    font-family: 'DM Sans', sans-serif;
}

.am-input-filter:focus {
    outline: none;
    border-color: #A78BFA;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.08);
}

.am-input-filter-inner-wrapper::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23A78BFA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.am-layout-two-coll .am-coll-left .am-coll-content,
.am-layout-two-coll .am-coll-right .am-coll-content {
    margin: 0 !important;
}

#member-main-subscriptions {
    padding: 0 !important;
}

/* ============================================================
   SIGNUP PAGE
   ============================================================ */
#signup-page #row-product_id_page-0-0 .am-element-title,
#signup-page #row-paysys_id .am-element-title {
    width: 100%;
    text-align: center;
    padding: 16px;
    background: linear-gradient(135deg, #F5F3FF, #EDE9FE);
    margin-bottom: 24px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 18px;
    color: #6B21A8;
    border: 1px solid rgba(139, 92, 246, 0.08);
}

#signup-page #row-product_id_page-0-0 .am-element,
#signup-page #row-paysys_id .am-element {
    margin: 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    padding-top: 0;
    flex-wrap: wrap;
    gap: 16px;
}

#signup-page #row-product_id_page-0-0 .am-element > *,
#signup-page #row-paysys_id .am-element > * {
    flex: 1;
    min-width: 200px;
}

#signup-page #row-product_id_page-0-0 .am-element br,
#signup-page #row-paysys_id .am-element br {
    display: none;
}

#signup-page #row-product_id_page-0-0 .am-element label,
#signup-page #row-paysys_id .am-element label {
    padding: 20px;
    box-shadow: 0 2px 10px rgba(124, 58, 237, 0.06);
    border: 2px solid #EDE9FE;
    margin: 0;
    cursor: pointer;
    border-radius: 16px;
    transition: all 0.3s ease;
    background: white;
}

#signup-page #row-product_id_page-0-0 .am-element label:hover,
#signup-page #row-paysys_id .am-element label:hover {
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.12);
    border-color: #A78BFA;
    transform: translateY(-4px);
}

#signup-page #row-product_id_page-0-0 .am-element label span,
#signup-page #row-paysys_id .am-element label span {
    display: block;
    margin: 8px 0px;
}

#signup-page #row-name-0 {
    margin-top: 40px;
    border-top: 2px solid #EDE9FE;
    padding-top: 40px;
}

/* ============================================================
   SIDEBAR — DARK PURPLE
   ============================================================ */
.dashboard-sidebar {
    background: #0F0720 !important;
}

.sidebar-menu li a {
    color: #B8A9D4;
}

.sidebar-menu li a:hover,
.sidebar-menu li a.active {
    background: linear-gradient(135deg, #7C3AED, #8B5CF6) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
}

.sidebar-menu li a.active::before {
    background: #7C3AED;
}

.sidebar-menu-category {
    color: #7C6B9E !important;
}

.page-wrapper {
    background: #FAF8FF;
}

/* ============================================================
   INPUT FIELDS
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea,
select {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #EDE9FE;
    border-radius: 14px;
    font-size: 15px;
    color: #1E1133;
    background: #F5F3FF;
    transition: all 0.3s ease;
    font-family: 'DM Sans', sans-serif;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #A78BFA;
    background: white;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.08);
}

/* ============================================================
   BUTTONS
   ============================================================ */
button,
input[type="submit"],
.btn {
    border-radius: 14px;
    padding: 12px 24px;
    font-weight: 600;
    transition: all 0.3s ease;
    font-family: 'DM Sans', sans-serif;
}

.btn-primary,
input[type="submit"] {
    background: linear-gradient(135deg, #7C3AED, #8B5CF6) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.25);
}

.btn-primary:hover,
input[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.35) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media all and (max-width: 800px) {
    #signup-page #row-paysys_id .am-element-title {
        margin-top: 32px;
        border-top: 2px solid #EDE9FE;
        padding-top: 32px;
    }

    #signup-page #row-paysys_id .am-element,
    #signup-page #row-product_id_page-0-0 .am-element {
        padding-left: 0;
        padding-right: 0;
    }

    .am-auth-form.am-form fieldset legend {
        font-size: 1.1rem;
        padding: 1.5em 1rem;
    }

    .subscription-welcome {
        padding: 32px 24px;
    }

    .welcome-title {
        font-size: 24px;
    }

    .welcome-subtitle {
        font-size: 16px;
    }
}

@media all and (max-width: 900px) {
    #widget-member-main-resources .am-block ul {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

@media all and (max-width: 700px) {
    #widget-member-main-resources .am-block ul {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .am-form form {
        padding: 1.5em;
    }

    .card-img-top {
        height: 160px;
    }
}

@media all and (max-width: 400px) {
    #widget-member-main-resources .am-block ul {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .navbar-expand-md .navbar-collapse .navbar-nav .nav-link {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .card-img-top {
        height: 140px;
    }

    h2.page-title,
    h2#member-main-resources-head {
        font-size: 24px;
    }
}

/* ============================================================
   AM BLOCKS / WIDGETS
   ============================================================ */
.am-block {
    background: white;
    border-radius: 18px;
    box-shadow: 0 2px 12px rgba(124, 58, 237, 0.04);
    padding: 24px;
    border: 1px solid rgba(139, 92, 246, 0.06);
}

.am-widget-title {
    font-size: 22px;
    font-weight: 700;
    color: #1E1133;
    margin-bottom: 20px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card,
.am-block,
.subscription-welcome {
    animation: fadeInUp 0.5s ease forwards;
}

/* ============================================================
   SCROLLBAR — PURPLE TINT
   ============================================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #F5F3FF;
}

::-webkit-scrollbar-thumb {
    background: #C4B5FD;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #A78BFA;
}

/* ============================================================
   SELECTION COLOR
   ============================================================ */
::selection {
    background: rgba(139, 92, 246, 0.2);
    color: #1E1133;
}

/* ============================================================
   LINKS — GLOBAL
   ============================================================ */
a {
    color: #7C3AED;
    transition: color 0.2s ease;
}

a:hover {
    color: #6B21A8;
}