.goappily-frontend-wrap{
    --goappily-primary-color: var(--goappily-primary-color);
    --goappily-secondary-color: var(--goappily-secondary-color);
}

.goappily-frontend-wrap {
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 16px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    
}

.goappily-tabs {
    display: inline-flex !important;
    flex-wrap: wrap;
    gap: 6px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    padding: 15px !important;
    background: #ffffff;
    align-content: center !important;
    justify-content: center !important;
}

.goappily-frontend-inner {
    background: #f9fafb;
    border-radius: 24px;
    overflow: hidden;
    -webkit-box-shadow: 0px 0px 25px 10px color-mix(in srgb, var(--goappily-primary-color) 50%, transparent);
    box-shadow: 0px 0px 25px 10px color-mix(in srgb, var(--goappily-primary-color) 50%, transparent);
}

.goappily-frontend-role {
    display: none;
}

.goappily-passenger-section-title {
    display: flex !important;
    flex-wrap: wrap !important;
}


.goappily-passenger-group h4 {
        display: flex !important;
    flex-wrap: wrap !important;
}


.goappily-frontend-header {
    padding: 20px 24px;
    background: linear-gradient(120deg, var(--goappily-secondary-color), var(--goappily-primary-color));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.goappily-frontend-header-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.goappily-frontend-header-actions {
    flex-shrink: 0;
}

.goappily-frontend-header h2 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 600;
}

.goappily-frontend-header p {
    margin: 0;
    font-size: 14px;
    opacity: 0.96;
}

.goappily-frontend-role {
    margin-top: 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.goappily-logout-button {
    border: none;
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    background: #ffffff;
    color: var(--goappily-primary-color);
    -webkit-box-shadow: 0px 0px 10px 1px var(--goappily-primary-color);
    box-shadow: 0px 0px 10px 1px var(--goappily-primary-color);
}

.goappily-logout-button:hover {
    background: var(--goappily-secondary-color); /* secondary */
    color: #ffffff;
}

.goappily-tabs-wrap {
    padding: 14px 20px 0;
    background: #f9fafb;
    text-align: center;
}

.goappily-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    padding: 4px;
    background: #ffffff;
}

.goappily-tab {
    border: 0;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 13px;
    cursor: pointer;
    background: transparent;
    color: #4b5563;
    line-height: 1.3;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.goappily-tab:hover {
    background: #e5f3dc;
    color: var(--goappily-primary-color);
}

.goappily-tab.active {
    background: var(--goappily-secondary-color);
    color: #ffffff;
    -webkit-box-shadow: 0px 0px 10px 1px var(--goappily-primary-color);
    box-shadow: 0px 0px 10px 1px var(--goappily-primary-color);
}

.goappily-tab-panels {
    padding: 18px 22px 22px;
    background: #f9fafb;
}

.goappily-panel {
    display: none;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    padding: 16px 10px;
    box-sizing: border-box;
    animation: goappilyFrontFadeIn 0.18s ease-out;
}

.goappily-panel.active {
    display: block;
}

.goappily-panel h3 {
    margin: 0 0 -15px;
    font-size: 18px;
    color: var(--goappily-primary-color);
}

.goappily-panel p {
    margin: 0 0 10px;
    font-size: 14px;
    color: #4b5563;
}

/* Messages tab */
.goappily-messages-portal{
    margin-top: 2px;
    padding: 0px 0px;
    border-radius: 14px;
}

.goappily-messages-portal p{
    margin: 0 0 12px;
}

.goappily-messages-portal .goappily-profile-submit{
    background: var(--goappily-secondary-color);
    box-shadow: 0px 0px 10px 1px color-mix(in srgb, var(--goappily-primary-color) 35%, transparent);
}

.goappily-messages-portal .goappily-profile-submit[disabled]{
    cursor: not-allowed;
    opacity: 0.75;
}

.goappily-login-wrap {
    max-width: 420px;
    margin: 40px auto;
    padding: 20px 22px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    -webkit-box-shadow: 0px 0px 25px 10px color-mix(in srgb, var(--goappily-primary-color) 25%, transparent);
    box-shadow: 0px 0px 25px 10px color-mix(in srgb, var(--goappily-primary-color) 25%, transparent);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    box-sizing: border-box;
}

.goappily-login-wrap h2 {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 600;
    color: var(--goappily-primary-color);
}

@media (max-width: 800px) {
    .goappily-frontend-wrap {
        padding: 0 10px;
    }

    .goappily-tab-panels {
        padding: 14px 14px 20px;
    }

    .goappily-frontend-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@keyframes goappilyFrontFadeIn {
    from {
        opacity: 0;
        transform: translateY(3px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}




.goappily-profile-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 20px;
    align-items: flex-start;
}

.goappily-profile-col {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    padding: 16px 18px;
    box-sizing: border-box;
}

.goappily-profile-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.goappily-profile-row span {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}

.goappily-profile-row input,
.goappily-profile-row textarea {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    padding: 8px 10px;
    font-size: 14px;
    box-sizing: border-box;
}

.goappily-profile-row textarea {
    resize: vertical;
}

.goappily-profile-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: none;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    background: var(--goappily-primary-color);
    color: #ffffff;
    cursor: pointer;
}

.goappily-profile-submit:hover {
    opacity: 0.92;
}

.goappily-profile-message {
    margin-top: 10px;
    font-size: 13px;
}

.goappily-profile-message-success {
    color: #065f46;
}

.goappily-profile-message-error {
    color: #b91c1c;
}

.goappily-activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.goappily-activity-item {
    padding: 10px 0;
    border-bottom: 1px solid #e5e7eb;
    font-size: 13px;
}

.goappily-activity-item:last-child {
    border-bottom: none;
}

.goappily-activity-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.goappily-activity-status {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
}

.goappily-activity-destination {
    color: #374151;
    margin-bottom: 2px;
}

.goappily-activity-meta {
    color: #6b7280;
    font-size: 12px;
}

@media (max-width: 900px) {
    .goappily-profile-grid {
        grid-template-columns: 1fr;
    }
}


.goappily-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.goappily-tab i {
    font-size: 14px;
}

.goappily-frontend-section-title {
       display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 14px;
}

.goappily-frontend-section-title i {
    font-size: 15px;
}


/* ------------------------------------------------------------
   Frontend Quotes
------------------------------------------------------------ */
.goappily-frontend-card{
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 18px;
    padding: 18px;
    margin: 16px 0;
    box-shadow: 0 12px 28px rgba(0,0,0,0.06);
}

.goappily-frontend-card-header h4{
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.goappily-frontend-field label{
    display:block;
    font-weight:600;
    margin-bottom:6px;
}

.goappily-frontend-field input[type="search"]{
    width: 100%;
    max-width: 520px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.15);
    box-sizing: border-box;
}

.goappily-frontend-actions{
    margin-top: 12px;
}

.goappily-frontend-table-wrap{
    margin-top: 14px;
    overflow-x: auto;
}

.goappily-frontend-table{
    width:100%;
    border-collapse: collapse;
    background:#fff;
}

.goappily-frontend-table th,
.goappily-frontend-table td{
    text-align:left;
    padding: 10px 10px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    vertical-align: middle;
    font-size: 14px;
}

.goappily-frontend-muted{
    color: rgba(0,0,0,0.55);
}

.goappily-status-pill{
    display:inline-flex;
    align-items:center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,0.06);
    font-size: 12px;
    font-weight: 600;
}

/* Buttons (respect UI Customising colours) */
.goappily-frontend-wrap .button.goappily-primary-button{
    background: var(--goappily-primary-color, #05482f);
    border-color: var(--goappily-primary-color, #05482f);
    color:#fff;
    border-radius: 999px;
    padding: 8px 14px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

.goappily-frontend-wrap .button.goappily-primary-button:hover{
    background: var(--goappily-secondary-color, #7fb33f);
    border-color: var(--goappily-secondary-color, #7fb33f);
    color:#fff;
}

.goappily-frontend-wrap .button.goappily-secondary-button{
    background: #ffffff;
    border: 2px solid var(--goappily-secondary-color, #7fb33f);
    color: var(--goappily-primary-color, #05482f);
    border-radius: 999px;
    padding: 7px 14px;
}

.goappily-frontend-wrap .button.goappily-secondary-button:hover{
    background: var(--goappily-secondary-color, #7fb33f);
    color:#fff;
}

.goappily-frontend-quote-actions{
    display:flex;
    gap: 8px;
    flex-wrap: wrap;
}

.goappily-quote-preview-body{
    margin-top: 6px;
}

/* Quotes tab: keep search input + button on one row */
.goappily-frontend-quote-search{
    display:flex;
    gap: 12px;
    align-items:flex-end;
    flex-wrap:wrap;
}

.goappily-frontend-quote-search .goappily-frontend-field{
    flex: 1;
    min-width: 260px;
    margin: 0;
}

.goappily-frontend-quote-search .goappily-frontend-actions{
    margin: 0;
    white-space: nowrap;
}

/* Quotes tab: reduce the "Retrieve A Quote" heading size and keep on one line on desktop */
.goappily-frontend-card .goappily-frontend-card-header h4{
    font-size: 18px;
    line-height: 1.2;
    white-space: nowrap;
}

/* Bookings tab: keep search input + button on one row */
.goappily-frontend-booking-search{
    display:flex;
    gap: 12px;
    align-items:flex-end;
    flex-wrap:wrap;
}

.goappily-frontend-booking-search .goappily-frontend-field{
    flex: 1;
    min-width: 260px;
    margin: 0;
}

.goappily-frontend-booking-search .goappily-frontend-actions{
    margin: 0;
    white-space: nowrap;
}

/* Bookings tab: contained two-column booking details layout.
   The booking confirmation uses a 700px Outlook-safe email canvas, so the
   left column receives slightly more room and both grid tracks are allowed to
   shrink without painting over one another. */
#goappily-tab-bookings .goappily-booking-details-layout{
    display:grid;
    grid-template-columns:minmax(0, 3fr) minmax(360px, 2fr);
    gap:18px;
    align-items:start;
}

#goappily-tab-bookings .goappily-booking-details-left,
#goappily-tab-bookings .goappily-booking-details-right{
    width:100%;
    min-width:0;
    box-sizing:border-box;
}

#goappily-tab-bookings .goappily-booking-details-right{
    display:flex;
    flex-direction:column;
    gap:14px;
}

/* Keep the fixed-width email canvas responsive inside the frontend Bookings
   preview only. This does not change the saved email template or sent email. */
#goappily-tab-bookings #goappily-booking-preview-body{
    width:100%;
    min-width:0;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

#goappily-tab-bookings #goappily-booking-preview-body table[width="700"]{
    width:100% !important;
    max-width:700px !important;
}

/* Mobile confirmation isolation: the booking confirmation is an email layout
   containing many nested tables. Those tables must remain part of one document,
   not become separate swipe regions. The preview body is the sole horizontal
   overflow container and receives at most one conditional hint above it. */
#goappily-tab-bookings #goappily-booking-preview-body,
#goappily-tab-bookings #goappily-booking-preview-body *{
    box-sizing:border-box;
}

#goappily-tab-bookings #goappily-booking-preview-body img{
    max-width:100% !important;
    height:auto !important;
}

#goappily-tab-bookings .goappily-booking-preview-scroll-hint{
    margin-top:0;
}

#goappily-tab-bookings .goappily-booking-preview-scroll-hint.no-overflow{
    display:none;
}

@media (max-width: 1024px){
    #goappily-tab-bookings #goappily-booking-preview-body{
        display:block;
        overflow-x:auto !important;
        overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
    }

    #goappily-tab-bookings #goappily-booking-preview-body table{
        max-width:100% !important;
    }
}

@media (max-width: 1320px){
    #goappily-tab-bookings .goappily-booking-details-layout{
        grid-template-columns:minmax(0, 1fr);
    }
}

.goappily-booking-sidecard{
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 14px;
}

.goappily-booking-sidecard h5{
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--goappily-primary-color);
    flex-wrap: wrap;
}

.goappily-booking-documents{
    list-style: none;
    padding: 0;
    margin: 0;
}

.goappily-booking-documents li{
    margin: 0 0 8px 0;
}

.goappily-booking-documents a{
    color: var(--goappily-primary-color);
    text-decoration: underline;
}

/* Booking Documents - modern download buttons */
.goappily-booking-documents .goappily-doc-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 10px 0;
}

.goappily-booking-documents .goappily-doc-button{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(0,0,0,0.04);
    text-decoration: none;
    color: var(--goappily-primary-color);
    font-weight: 600;
}

.goappily-booking-documents .goappily-doc-button:hover{
    background: rgba(0,0,0,0.06);
}

.goappily-booking-documents .goappily-doc-date{
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(0,0,0,0.03);
    color: rgba(0,0,0,0.70);
}

/* Booking Assistant (sidebar) */
.goappily-booking-assistant ul{
    margin: 10px 0 0 18px;
    padding: 0;
}
.goappily-booking-assistant li{
    margin: 0 0 6px 0;
}
.goappily-booking-assistant-sidecard .goappily-booking-assistant-actions{
    margin-top: 10px;
}

/* Simple modal (Booking Assistant) */
.goappily-modal{
    position: fixed;
    inset: 0;
    z-index: 9999;
}
.goappily-modal-backdrop{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
}
.goappily-modal-dialog{
    position: relative;
    width: min(720px, calc(100% - 30px));
    margin: 6vh auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    overflow: hidden;
}
.goappily-modal-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
}
.goappily-modal-header h4{
    margin: 0;
    font-size: 16px;
}
.goappily-modal-close{
    background: transparent;
    border: none;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: rgba(0,0,0,0.6);
}
.goappily-modal-body{
    padding: 14px 16px 16px 16px;
}
.goappily-modal-footer{
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    background: #fafafa;
}
.goappily-booking-assistant-form,
.goappily-booking-assistant-ask-row{
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.goappily-booking-assistant-form input,
.goappily-booking-assistant-ask-row input{
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
}
.goappily-booking-assistant-answer{
    margin-top: 12px;
}

@media (max-width: 480px){
    .goappily-booking-documents .goappily-doc-item{
        align-items: stretch;
    }
    .goappily-booking-documents .goappily-doc-button{
        width: 100%;
        justify-content: center;
    }
}


.goappily-booking-transactions table{
    width: 100%;
    border-collapse: collapse;
}

.goappily-booking-transactions th,
.goappily-booking-transactions td{
    font-size: 12px;
    padding: 6px 6px;
    border-bottom: 1px solid #e5e7eb;
    text-align:left;
}

.goappily-booking-transactions th{
    background: rgba(0,0,0,0.02);
}

@media (max-width: 480px){
    .goappily-frontend-card .goappily-frontend-card-header h4{
        white-space: normal;
    }
}

/* Slimline tables for Retrieve Quote / Retrieve Booking */
.goappily-frontend-table th,
.goappily-frontend-table td{
    padding: 6px 8px;
    font-size: 13px;
    line-height: 1.25;
}

.goappily-frontend-table th{
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Slimline buttons inside tables */
.goappily-frontend-table .button.goappily-primary-button{
    padding: 6px 12px;
    font-size: 13px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.10);
}

.goappily-frontend-table .button.goappily-secondary-button{
    padding: 5px 12px;
    font-size: 13px;
}

/* Slightly smaller status pills to match reduced row height */
.goappily-status-pill{
    padding: 3px 9px;
    font-size: 12px;
}

/* Quote preview: prevent theme table borders bleeding into the preview */
.goappily-quote-preview-body table,
.goappily-quote-preview-body th,
.goappily-quote-preview-body td{
    border: 0 !important;
    padding: 10px !important;
}

.goappily-quote-preview-body h2 {
    font-size: 26px;
}

.goappily-quote-preview-body table{
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    background-color: #ffff !important;
}

/* Booking/quote preview source-of-truth: do not restyle generated template HTML here.
   The saved template builder output owns width, background, borders, colours and spacing.
   The wrapper may style only chrome outside the rendered email/document. */
.goappily-booking-preview-body{
    background: transparent;
}

/* Booking PDF button */
.goappily-booking-pdf-button{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;font-size:14px;}


/* Home tab layout */
.goappily-home-grid{
    display:flex;
    gap:18px;
    align-items:stretch;
}
.goappily-home-col{
    flex:1 1 0;
    min-width:0;
}
.goappily-home-left, .goappily-home-right{
    display:flex;
    flex-direction:column;
    gap:16px;
}
.goappily-home-welcome{
    text-align:center;
    padding:18px 16px;
    border:1px solid rgba(0,0,0,0.06);
    border-radius:14px;
    background:#fff;
    box-shadow:0 8px 22px rgba(0,0,0,0.06);
}
.goappily-home-welcome-icon{
    width:52px;
    height:52px;
    margin:0 auto 10px auto;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--goappily-secondary-color);
    color:#fff;
    box-shadow:0 10px 20px rgba(0,0,0,0.10);
}
.goappily-home-welcome h3{
    margin:0 0 8px 0;
    font-size:18px;
    font-weight:700;
}
.goappily-home-welcome p{
    margin:0;
    opacity:0.85;
    line-height:1.5;
}
.goappily-home-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px 16px;
    border:1px solid rgba(0,0,0,0.06);
    border-radius:14px;
    background:#fff;
    box-shadow:0 8px 22px rgba(0,0,0,0.06);
    min-height:180px;
}
.goappily-home-logo img{
    max-width:260px;
    width:100%;
    height:auto;
    object-fit:contain;
}
.goappily-home-logo-placeholder{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    opacity:0.75;
}
.goappily-home-logo-placeholder i{
    font-size:26px;
}

/* Agency card */
.goappily-agency-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:18px 16px;
    border:1px solid rgba(0,0,0,0.06);
    border-radius:14px;
    background:#fff;
    box-shadow:0 8px 22px rgba(0,0,0,0.06);
    min-height:260px;
    justify-content:center;
}
.goappily-agency-card-header{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border-radius:999px;
    margin-bottom:12px;
    font-weight:700;
}
.goappily-agency-card-header i{
    color:var(--goappily-primary-color);
}
.goappily-agency-name{
    font-size:20px;
    font-weight:800;
    margin-bottom:8px;
}
.goappily-agency-agent{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-weight:600;
    margin-bottom:10px;
    opacity:0.9;
}
.goappily-agency-agent i{
    color:var(--goappily-secondary-color);
}
.goappily-agency-description{
    width:100%;
    max-width:560px;
    margin:0 auto 14px auto;
    opacity:0.88;
    line-height:1.6;
}

/* Social icon buttons */
.goappily-agency-socials{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
}
.goappily-social-btn{
    width:44px;
    height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:var(--goappily-primary-color);
    color:#fff;
    text-decoration:none;
    box-shadow:0 10px 18px rgba(0,0,0,0.12);
    transition:transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}
.goappily-social-btn:hover{
    transform:translateY(-1px);
    opacity:0.95;
    box-shadow:0 12px 22px rgba(0,0,0,0.14);
}
.goappily-social-btn:focus{
    outline:2px solid rgba(0,0,0,0.12);
    outline-offset:3px;
}
.goappily-social-btn i{
    font-size:18px;
    color:#fff !important;
}

/* If any social icons are rendered as inline SVGs, force them to be white too */
.goappily-social-btn svg{
    fill:#fff !important;
}

/* Responsive */
@media (max-width: 900px){
    .goappily-home-grid{
        flex-direction:column;
    }
}

/* --------------------------------------------------------------------------
 * Booking preview (Frontend)
 * Match backend preview styling by neutralising theme table borders and
 * ensuring rounded cards inside the preview.
 * Scoped strictly to the booking preview container.
 * -------------------------------------------------------------------------- */

/* Outer preview wrapper */
#goappily-booking-preview-body .goappily-booking-preview-html{
    border-radius:10px !important;
    overflow:hidden; /* helps rounded corners clip inner sections */
}

/* Theme table resets (many themes add borders with !important) */
#goappily-booking-preview-body .goappily-booking-preview-html table,
#goappily-booking-preview-body .goappily-booking-preview-html thead,
#goappily-booking-preview-body .goappily-booking-preview-html tbody,
#goappily-booking-preview-body .goappily-booking-preview-html tfoot{
    border:0 !important;
    box-shadow:none !important;
}

#goappily-booking-preview-body .goappily-booking-preview-html th,
#goappily-booking-preview-body .goappily-booking-preview-html td{
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    background-clip:padding-box;
}

/* Ensure any email-style tables that specify rounded corners can actually show them */
#goappily-booking-preview-body .goappily-booking-preview-html table[style*="border-radius"]{
    border-collapse:separate !important;
    border-spacing:0 !important;
    overflow:hidden !important;
}

/* If a section uses an outer border, give it the same rounded card feel as backend */
#goappily-booking-preview-body .goappily-booking-preview-html table[style*="border:1px"],
#goappily-booking-preview-body .goappily-booking-preview-html div[style*="border:1px"]{
    border-radius:10px !important;
}

/* Guard against theme "img {max-width:100%; height:auto;}" issues in previews */
#goappily-booking-preview-body .goappily-booking-preview-html img{
    border-radius:8px;
}

/* --------------------------------------------------------------------------
 * Payments (Frontend)
 * Two-column layout with customer-only payments table + gateway embed
 * -------------------------------------------------------------------------- */

.goappily-payments-grid{
    display:flex;
    gap:18px;
    align-items:flex-start;
}
.goappily-payments-col{
    flex:1;
    min-width:0;
    width: 100% !important;
}

.goappily-muted{
    color:#6b7280;
    margin:0 0 12px 0;
}

.goappily-payments-table-wrap{
    background:#fff;
    border:1px solid #e6e8ee;
    border-radius:14px;
    padding:12px;
    /*
     * Payments table wrapper must be the horizontal scroll container on mobile.
     * Some theme CSS can interfere with overflow handling causing the table
     * header/background to visually spill outside the rounded card.
     */
    display:block;
    max-width:100%;
    box-sizing:border-box;
    overflow-x:auto !important;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
}

/* Override the generic .goappily-table-scroll table{width:100%} rule */
.goappily-payments-table-wrap.goappily-table-scroll table.goappily-payments-table{
    /*
     * Use intrinsic width so columns don't squash into unreadable widths.
     * min-width:100% keeps it filling the card when content is short.
     */
    width:max-content !important;
    min-width:100%;
    border-collapse:separate;
    border-spacing:0;
    font-size:14px;
}

/*
 * Ensure the Payments table is horizontally swipeable on mobile.
 * This table can shrink to fit the viewport (especially on larger phones
 * or landscape), which removes horizontal overflow and makes long values
 * hard to read. We prevent aggressive wrapping and enforce a minimum width
 * on smaller screens so users can swipe left/right to view all columns.
 */
.goappily-payments-table th,
.goappily-payments-table td{
    white-space:nowrap;
}

@media (max-width: 1024px){
    .goappily-payments-table{
        min-width: 820px;
    }
}
.goappily-payments-table thead th{
    background:var(--goappily-primary-color);
    color:#fff;
    text-align:left;
    padding:12px 10px;
    font-weight:700;
}
.goappily-payments-table thead th:first-child{ border-top-left-radius:10px; }
.goappily-payments-table thead th:last-child{ border-top-right-radius:10px; }

.goappily-payments-table tbody td{
    padding:12px 10px;
    border-bottom:1px solid #eef0f4;
    vertical-align:top;
    background:#fff;
}
.goappily-payments-table tbody tr:last-child td{ border-bottom:0; }

/* Neutralise theme table borders inside this component */
.goappily-payments-table,
.goappily-payments-table *{
    border-left:0 !important;
    border-right:0 !important;
}

.goappily-mono{
    font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size:13px;
}

.goappily-empty{
    text-align:center;
    color:#6b7280;
    padding:18px 10px;
}

.goappily-status-pill{
    display:inline-flex;
    align-items:center;
    padding:6px 10px;
    border-radius:999px;
    font-weight:700;
    font-size:12px;
    line-height:1;
    background:#eef2ff;
    color:#1f2937;
}
.goappily-status-paid{ background:rgba(16,185,129,0.14); color:#065f46; }
.goappily-status-pending{ background:rgba(245,158,11,0.16); color:#92400e; }
.goappily-status-cancelled{ background:rgba(239,68,68,0.14); color:#7f1d1d; }
.goappily-status-refunded{ background:rgba(59,130,246,0.14); color:#1e3a8a; }

.goappily-payments-gateway{
    background:#fff;
    border:1px solid #e6e8ee;
    border-radius:14px;
    padding:5px;
}

@media (max-width: 900px){
    .goappily-payments-grid{
        flex-direction:column;
    }
}


/* ------------------------------------------------------------
   Frontend Profile Overview (Account activity replacement)
------------------------------------------------------------ */
.goappily-profile-stats-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 12px 0 18px;
}

.goappily-profile-stat-card{
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 18px;
    padding: 14px 14px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 12px;
}

.goappily-profile-stat-icon{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--goappily-secondary-color);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}

.goappily-profile-stat-label{
    font-size: 12px;
    font-weight: 700;
    color: rgba(0,0,0,0.55);
    letter-spacing: 0.2px;
    margin-bottom: 2px;
}

.goappily-profile-stat-value{
    font-size: 18px;
    font-weight: 800;
    color: var(--goappily-primary-color);
    line-height: 1.2;
}

.goappily-profile-stat-sub{
    font-size: 12px;
    color: rgba(0,0,0,0.55);
    margin-top: 4px;
    min-height: 14px;
}

.goappily-profile-activity-box{
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 18px;
    padding: 16px;
    margin: 14px 0;
    box-shadow: 0 12px 28px rgba(0,0,0,0.06);
}

.goappily-profile-activity-head{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom: 12px;
}

.goappily-profile-activity-head h4{
     margin: 0;
    font-size: 15px;
    color: var(--goappily-primary-color);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.goappily-profile-activity-head--with-action{
    justify-content: space-between;
}

.goappily-profile-activity-table-wrap{
    overflow-x: auto;
}

.goappily-profile-activity-table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
}

.goappily-profile-activity-table thead th{
    background: var(--goappily-primary-color);
    color: #ffffff;
    font-weight: 800;
    font-size: 13px;
    padding: 10px 12px;
    border: none !important;
}

.goappily-profile-activity-table tbody td{
    padding: 10px 12px;
    border: none !important;
    border-top: 1px solid rgba(0,0,0,0.06) !important;
    font-size: 13px;
}

.goappily-profile-activity-table tbody tr:first-child td{
    border-top: none !important;
}

/* badges */
.goappily-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    margin-left: 8px;
    border: 1px solid rgba(0,0,0,0.10);
}

.goappily-badge--primary{
    background: var(--goappily-secondary-color);
    color: #ffffff;
    border-color: rgba(0,0,0,0.10);
}

.goappily-badge--danger{
    background: #d11a2a;
    color: #ffffff;
    border-color: rgba(0,0,0,0.10);
}

/* secondary button (match CRM rules) */
.goappily-secondary-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background: var(--goappily-secondary-color);
    color:#ffffff;
    text-decoration:none;
    padding: 8px 12px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 12px;
    border: 1px solid rgba(0,0,0,0.10);
    box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}

.goappily-secondary-button:hover{
    filter: brightness(0.96);
    color:#ffffff;
    text-decoration:none;
}

@media (max-width: 900px){
    .goappily-profile-stats-grid{ grid-template-columns: 1fr; }
}



/* Messages tab: cancel button styling */
.goappily-messages-portal .go-msg-cancel,
.goappily-messages-portal .go-msg-cancel-btn,
.goappily-messages-portal #go-msg-cancel,
.goappily-messages-portal button.cancel,
.goappily-messages-portal .button.cancel {
  appearance: none;
  border: 1px solid #d1d5db !important;
  background: #ffffff !important;
  color: #374151 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-weight: 600 !important;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
}

.goappily-messages-portal .go-msg-cancel:hover,
.goappily-messages-portal .go-msg-cancel-btn:hover,
.goappily-messages-portal #go-msg-cancel:hover,
.goappily-messages-portal button.cancel:hover,
.goappily-messages-portal .button.cancel:hover {
  background: #f9fafb !important;
}

/* Transactions: Status pills (frontend) */
.go-status-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 10px;
    font-size:13px;
    font-weight:600;
    border-radius:999px;
    line-height:1.2;
    white-space:nowrap;
    position:relative;
    cursor:default;
    transition:transform .12s ease, filter .12s ease, opacity .12s ease;
}
.go-status-pill i{
    font-size:14px;
    line-height:1;
}
.go-status-pill:hover{
    transform:translateY(-1px);
    filter:brightness(0.98);
}

/* Tooltip */
.go-status-pill[data-tooltip]::after{
    content:attr(data-tooltip);
    position:absolute;
    left:50%;
    bottom:calc(100% + 10px);
    transform:translateX(-50%) translateY(2px);
    background:#111827;
    color:#fff;
    padding:6px 8px;
    border-radius:10px;
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:opacity .12s ease, transform .12s ease;
    z-index:50;
}
.go-status-pill[data-tooltip]::before{
    content:"";
    position:absolute;
    left:50%;
    bottom:calc(100% + 4px);
    transform:translateX(-50%);
    width:0;
    height:0;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-top:6px solid #111827;
    opacity:0;
    pointer-events:none;
    transition:opacity .12s ease;
    z-index:49;
}
.go-status-pill:hover::after,
.go-status-pill:hover::before{
    opacity:1;
}
.go-status-pill:hover::after{
    transform:translateX(-50%) translateY(0);
}

/* Colour mapping */
/* Default */
.go-status-pill{background-color:#eef2ff;color:#3730a3;}

.go-status-paid{
    background-color:#e6f4ea;
    color:#137333;
}
.go-status-refunded{
    background-color:#fdecea;
    color:#b3261e;
}
.go-status-pending{
    background-color:#fff4e5;
    color:#b45309;
}
.go-status-failed,
.go-status-cancelled{
    background-color:#f3f4f6;
    color:#374151;
}

/* Fallback for any unknown status */
.go-status-pill{
    background-color:#eef2ff;
    color:#3730a3;
}


/* Passenger form: AI holiday summary */
.goappily-passenger-section-summary{
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:16px;
    margin:0 0 16px 0;
    background:#ffffff;
}
.goappily-holiday-summary .goappily-passenger-section-title{
    margin:0 0 10px 0;
}
.goappily-holiday-summary-list{
    margin:0;
    padding-left:18px;
}
.goappily-holiday-summary-list li{
    margin:6px 0;
}
.goappily-holiday-summary-disclaimer{
    margin:10px 0 0 0;
    font-size:13px;
    opacity:0.85;
}


/* Booking Assistant icon rows */
.goappily-booking-assistant-items{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:8px;
}
.goappily-assist-row{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:14px;
    line-height:1.4;
}
.goappily-assist-row i{
    margin-top:2px;
    font-size:16px;
    width:18px;
    text-align:center;
    opacity:0.9;
}
.goappily-assist-text{
    flex:1;
}

/* --------------------------------------------------------------------------
 * Mobile responsive tables (horizontal swipe)
 * -------------------------------------------------------------------------- */

.goappily-table-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  position: relative;
}

/* Subtle one-time mobile hint for horizontal swipe */
.goappily-swipe-hint {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #000000;
  pointer-events: none;
  backdrop-filter: blur(2px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  opacity: 1;
  transform: translateY(0);
}

.goappily-swipe-hint.is-hidden {
  opacity: 0;
  transform: translateY(-4px);
}

@media (min-width: 783px) {
  .goappily-swipe-hint { display: none; }
}

.goappily-table-scroll table {
  width: 100%;
  border-collapse: collapse;
}

@media (max-width: 782px) {
  .goappily-table-scroll table {
    min-width: 720px;
  }

  .goappily-table-scroll::-webkit-scrollbar {
    height: 10px;
  }
}


/* Orders (Customer Portal) */
.goappily-orders-two-column {
  display: flex;
  gap: 18px;
  margin-top: 18px;
  align-items: flex-start;
}

.goappily-order-view-panel {
  flex: 1 1 52%;
}

.goappily-order-side-panels {
  flex: 1 1 48%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.goappily-order-financials-mini {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin-top: 12px;
}

.goappily-order-notes {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
}

.goappily-doc-list {
  margin: 0;
  padding-left: 18px;
}

.goappily-mini-table {
  margin-top: 8px;
}

@media (max-width: 900px) {
  .goappily-orders-two-column {
    flex-direction: column;
  }
  .goappily-order-view-panel,
  .goappily-order-side-panels {
    flex: 1 1 100%;
  }
}



/* ------------------------------------------------------------
   Frontend Orders Tab (match Bookings look & feel)
------------------------------------------------------------ */
#goappily-tab-orders .goappily-order-retrieve-card{
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 18px;
    padding: 18px;
    margin: 16px 0;
    box-shadow: 0 12px 28px rgba(0,0,0,0.06);
}

#goappily-tab-orders .goappily-card{
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.06);
}

#goappily-tab-orders .goappily-card-title{
    margin: 0 0 12px 0;
    display:flex;
    align-items:center;
    gap: 8px;
    font-size: 18px;
    line-height: 1.2;
    white-space: nowrap;
}

#goappily-tab-orders .goappily-card-title i{
    font-size: 16px;
}

#goappily-tab-orders .goappily-retrieve-search{
    display:flex;
    gap: 12px;
    align-items:flex-end;
    flex-wrap:wrap;
    margin-bottom: 14px;
}

#goappily-tab-orders .goappily-retrieve-search .goappily-search-input{
    flex: 1;
    min-width: 260px;
    width: 100%;
    max-width: 520px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.15);
    box-sizing: border-box;
}

#goappily-tab-orders .goappily-retrieve-search .goappily-search-button{
    white-space: nowrap;
}

/* Orders list table: match slimline bookings table */
#goappily-tab-orders .goappily-order-list-table{
    width:100%;
    border-collapse: separate;
    border-spacing: 0;
    background:#fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    overflow:hidden;
}

#goappily-tab-orders .goappily-order-list-table thead th{
    background: var(--goappily-primary-color, #05482f);
    color:#ffffff;
    border-bottom: 0;
    padding: 10px 10px;
    font-weight: 700;
}

#goappily-tab-orders .goappily-order-list-table thead th:first-child{
    border-top-left-radius: 14px;
}

#goappily-tab-orders .goappily-order-list-table thead th:last-child{
    border-top-right-radius: 14px;
}

#goappily-tab-orders .goappily-order-list-table td{
    padding: 6px 8px;
    font-size: 13px;
    line-height: 1.25;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    vertical-align: middle;
}

#goappily-tab-orders .goappily-order-list-table tbody tr:last-child td{
    border-bottom: 0;
}

#goappily-tab-orders .goappily-order-list-table .button.goappily-primary-button{
    padding: 6px 12px;
    font-size: 13px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.10);
}

#goappily-tab-orders .goappily-order-list-table .button.goappily-secondary-button{
    padding: 5px 12px;
    font-size: 13px;
}

#goappily-tab-orders .goappily-order-list-table .goappily-status-col{
    white-space: nowrap;
    width: 1%;
}

#goappily-tab-orders .goappily-order-list-table .go-status-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 8px;
    border-radius:999px;
    font-size:11px;
    line-height:1.1;
    font-weight:700;
    white-space:nowrap;
}

#goappily-tab-orders .goappily-order-list-table .go-status-confirmed,
#goappily-tab-orders .goappily-order-list-table .go-status-completed{
    background:#e6f4ea;
    color:#137333;
}

#goappily-tab-orders .goappily-order-list-table .go-status-needs-review{
    background:#fff4e5;
    color:#b45309;
}

#goappily-tab-orders .goappily-order-list-table .goappily-actions-col{
    white-space: nowrap;
}

#goappily-tab-orders .goappily-order-list-table .goappily-actions-col .button{
    padding:5px 9px;
    font-size:12px;
    line-height:1.2;
    margin:0 2px 0 0;
    white-space:nowrap;
}

/* Two-column layout like Bookings */
#goappily-tab-orders .goappily-orders-two-column{
    display:grid;
    grid-template-columns: 1fr 420px;
    gap: 18px;
    align-items:start;
    margin-top: 16px;
}

#goappily-tab-orders .goappily-order-side-panels{
    display:flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 980px){
    #goappily-tab-orders .goappily-orders-two-column{
        grid-template-columns: 1fr;
    }
    #goappily-tab-orders .goappily-card-title{
        white-space: normal;
    }
}


/* Customer Copy modal (Quotes) */
.goappily-customer-copy-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}
@media (min-width: 900px){
  .goappily-customer-copy-grid{ grid-template-columns: 1fr 1fr; }
}
.goappily-customer-copy-block input[type="text"],
.goappily-customer-copy-block input[type="number"]{
  width:100%;
  max-width:260px;
}


.goappily-table-scroll-wrap{
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.goappily-table-scroll-hint{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 8px 0 10px 0;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(5,72,47,0.08);
    border: 1px solid rgba(5,72,47,0.14);
    color: rgba(5,72,47,0.95);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
}
.goappily-table-scroll-text{ position: relative; z-index:2; white-space: nowrap; }
.goappily-table-scroll-arrow{ position: relative; z-index:2; font-size:15px; line-height:1; animation: goappilyScrollNudge 1.6s ease-in-out infinite; }
.goappily-table-scroll-arrow-left{ animation-name: goappilyScrollNudgeLeft; }
.goappily-table-scroll-fade{ position:absolute; top:0; bottom:0; width:52px; pointer-events:none; opacity:1; transition:opacity .2s ease; }
.goappily-table-scroll-fade-left{ left:0; background: linear-gradient(to right, rgba(5,72,47,0.18), rgba(5,72,47,0)); }
.goappily-table-scroll-fade-right{ right:0; background: linear-gradient(to left, rgba(5,72,47,0.18), rgba(5,72,47,0)); }
.goappily-table-scroll-hint.at-start .goappily-table-scroll-arrow-left,
.goappily-table-scroll-hint.at-start .goappily-table-scroll-fade-left{ opacity: .25; }
.goappily-table-scroll-hint.at-end .goappily-table-scroll-arrow-right,
.goappily-table-scroll-hint.at-end .goappily-table-scroll-fade-right{ opacity: .25; }
.goappily-table-scroll-hint.no-overflow .goappily-table-scroll-arrow,
.goappily-table-scroll-hint.no-overflow .goappily-table-scroll-fade{ opacity: .45; }
@keyframes goappilyScrollNudge{ 0%,100%{transform:translateX(0);} 50%{transform:translateX(3px);} }
@keyframes goappilyScrollNudgeLeft{ 0%,100%{transform:translateX(0);} 50%{transform:translateX(-3px);} }
@media (min-width:1025px){ .goappily-table-scroll-hint{ display:none; } }

/* Frontend cancellation modal */
body.goappily-modal-open {
  overflow: hidden;
}

.goappily-cancel-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.goappily-cancel-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

.goappily-cancel-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
  padding: 28px 24px 22px;
  text-align: center;
  border: 1px solid #e5e7eb;
}

.goappily-cancel-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
}

.goappily-cancel-modal__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.goappily-cancel-modal__dialog h3 {
  margin: 0 0 10px;
}

.goappily-cancel-modal__message {
  margin: 0;
  color: #475569;
  line-height: 1.7;
}

.goappily-cancel-modal__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 22px;
}

.goappily-cancel-modal__feedback {
  margin: 16px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
}

.goappily-cancel-modal__feedback.is-success {
  background: rgba(34, 197, 94, 0.12);
  color: #166534;
}

.goappily-cancel-modal__feedback.is-error {
  background: rgba(239, 68, 68, 0.12);
  color: #991b1b;
}

#goappily-tab-bookings .goappily-secondary-button.goappily-cancel-request-trigger,
#goappily-tab-orders .goappily-secondary-button.goappily-cancel-request-trigger {
  margin-left: 8px;
}

@media (max-width: 640px) {
  .goappily-cancel-modal__dialog {
    padding: 24px 18px 18px;
  }

  .goappily-cancel-modal__actions {
    flex-direction: column;
  }

  #goappily-tab-bookings .goappily-secondary-button.goappily-cancel-request-trigger,
  #goappily-tab-orders .goappily-secondary-button.goappily-cancel-request-trigger {
    margin-left: 0;
    margin-top: 8px;
  }
}


/* Frontend document downloads - shared CRM card/button style for Booking and Order documents */
.goappily-booking-documents,
.goappily-order-documents{
    list-style: none;
    padding: 0;
    margin: 0;
}

.goappily-booking-documents .goappily-doc-item,
.goappily-order-documents .goappily-doc-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    margin: 0 0 12px 0;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.goappily-booking-documents .goappily-doc-file,
.goappily-order-documents .goappily-doc-file{
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.goappily-booking-documents .goappily-doc-file-icon,
.goappily-order-documents .goappily-doc-file-icon{
    width: 44px;
    height: 44px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f8fafc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--goappily-primary-color);
    flex: 0 0 auto;
}

.goappily-booking-documents .goappily-doc-file-meta,
.goappily-order-documents .goappily-doc-file-meta{
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.goappily-booking-documents .goappily-doc-name,
.goappily-order-documents .goappily-doc-name{
    font-weight: 700;
    color: #0f172a;
    overflow-wrap: anywhere;
}

.goappily-booking-documents .goappily-doc-date,
.goappily-order-documents .goappily-doc-date{
    font-size: 12px;
    color: #64748b;
    padding: 0;
    border: 0;
    background: transparent;
}

.goappily-booking-documents .goappily-doc-download-button,
.goappily-order-documents .goappily-doc-download-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 132px;
    padding: 11px 16px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: var(--goappily-primary-color);
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 700;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
}

.goappily-booking-documents .goappily-doc-download-button:hover,
.goappily-order-documents .goappily-doc-download-button:hover{
    filter: brightness(1.06);
    color: #ffffff !important;
}

.goappily-booking-documents .goappily-doc-help,
.goappily-order-documents .goappily-doc-help{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 15px;
    margin-top: 8px;
    border: 1px solid rgba(37, 99, 235, 0.28);
    border-radius: 14px;
    background: rgba(37, 99, 235, 0.04);
    color: #1e3a8a;
}

.goappily-booking-documents .goappily-doc-help i,
.goappily-order-documents .goappily-doc-help i{
    margin-top: 2px;
    color: #2563eb;
}

@media (max-width: 640px){
    .goappily-booking-documents .goappily-doc-item,
    .goappily-order-documents .goappily-doc-item{
        align-items: stretch;
        flex-direction: column;
    }
    .goappily-booking-documents .goappily-doc-download-button,
    .goappily-order-documents .goappily-doc-download-button{
        width: 100%;
    }
}


.goappily-payments-gateway-message {
    background: #fff;
    border: 1px solid rgba(5, 72, 47, 0.14);
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.goappily-payments-gateway-message p {
    margin: 0;
}

/* Template preview source-of-truth audit:
   Do not forcibly recolour customer-facing quote/booking preview HTML with frontend CSS.
   The currently saved template builder HTML, after merge-tag replacement, owns colours and styles. */

/* v21.0.130 / v0.8.1: preserve email-template rounded section cards in frontend booking previews.
   The earlier theme reset removed borders from all preview <td> elements, which flattened
   email-builder sections where the border and border-radius live directly on a table cell. */
.goappily-booking-preview-body .goappily-booking-preview-html table[style*="border-radius"],
.goappily-external-agent-shell .goappily-booking-preview-body .goappily-booking-preview-html table[style*="border-radius"]{
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden !important;
}
.goappily-booking-preview-body .goappily-booking-preview-html td[style*="border-radius:12px"],
.goappily-booking-preview-body .goappily-booking-preview-html td[style*="border-radius: 12px"],
.goappily-external-agent-shell .goappily-booking-preview-body .goappily-booking-preview-html td[style*="border-radius:12px"],
.goappily-external-agent-shell .goappily-booking-preview-body .goappily-booking-preview-html td[style*="border-radius: 12px"]{
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background-clip: padding-box !important;
}
.goappily-booking-preview-body .goappily-booking-preview-html td[style*="border-radius:10px"],
.goappily-booking-preview-body .goappily-booking-preview-html td[style*="border-radius: 10px"],
.goappily-external-agent-shell .goappily-booking-preview-body .goappily-booking-preview-html td[style*="border-radius:10px"],
.goappily-external-agent-shell .goappily-booking-preview-body .goappily-booking-preview-html td[style*="border-radius: 10px"]{
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background-clip: padding-box !important;
}
.goappily-booking-preview-body .goappily-booking-preview-html div[style*="border-radius:18px"],
.goappily-booking-preview-body .goappily-booking-preview-html div[style*="border-radius: 18px"],
.goappily-external-agent-shell .goappily-booking-preview-body .goappily-booking-preview-html div[style*="border-radius:18px"],
.goappily-external-agent-shell .goappily-booking-preview-body .goappily-booking-preview-html div[style*="border-radius: 18px"]{
    border-radius: 18px !important;
    overflow: hidden !important;
}
.goappily-booking-preview-body .goappily-booking-preview-html div[style*="border-radius:10px"],
.goappily-booking-preview-body .goappily-booking-preview-html div[style*="border-radius: 10px"],
.goappily-external-agent-shell .goappily-booking-preview-body .goappily-booking-preview-html div[style*="border-radius:10px"],
.goappily-external-agent-shell .goappily-booking-preview-body .goappily-booking-preview-html div[style*="border-radius: 10px"]{
    border-radius: 10px !important;
}


.goappily-message-notice-overlay{position:fixed;inset:0;background:rgba(15,23,42,.48);z-index:999999;display:flex;align-items:center;justify-content:center;padding:22px}.goappily-message-notice-card{position:relative;background:#fff;border-radius:18px;box-shadow:0 24px 70px rgba(15,23,42,.28);max-width:480px;width:100%;padding:28px;color:#1f2937;text-align:left}.goappily-message-notice-card h3{margin:0 34px 12px 0;font-size:22px;line-height:1.25}.goappily-message-notice-card p{font-size:15px;line-height:1.55;margin:0 0 12px}.goappily-message-notice-close{position:absolute;top:12px;right:14px;border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer;color:#64748b}.goappily-message-notice-ok{margin-top:8px}


/* GoAppily booking/order compact action buttons */
.goappily-booking-actions,
.goappily-order-actions,
.goappily-actions-col {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.goappily-booking-actions .button,
.goappily-booking-actions button,
.goappily-order-actions .button,
.goappily-order-actions button,
.goappily-actions-col .button,
.goappily-actions-col button,
.goappily-customer-action-button {
    min-height: 30px;
    padding: 6px 10px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
}
.goappily-booking-actions--compact {
    flex-wrap: nowrap;
}
@media (max-width: 980px) {
    .goappily-booking-actions--compact {
        flex-wrap: wrap;
    }
}

/* Frontend quote list status highlighting */
.goappily-frontend-table tr.goappily-quote-row.goappily-quote-status-sent td{
    background: #fff7d6;
}

.goappily-frontend-table tr.goappily-quote-row.goappily-quote-status-booked td{
    background: #dcfce7;
}

.goappily-frontend-table tr.goappily-quote-row.goappily-quote-status-expired td{
    background: #f3f4f6;
}

.goappily-frontend-table tr.goappily-quote-row.goappily-quote-status-on-hold td{
    background: #ede9fe;
}

/* Frontend quote/booking/order quick status filters */
.goappily-frontend-status-filters{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    margin:12px 0 14px;
}
.goappily-frontend-status-filters .goappily-filter-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #dbe3ef;
    border-radius:999px;
    background:#ffffff;
    color:#334155;
    padding:7px 13px;
    font-size:13px;
    font-weight:700;
    line-height:1;
    text-decoration:none;
    cursor:pointer;
    box-shadow:0 1px 2px rgba(15,23,42,.05);
}
.goappily-frontend-status-filters .goappily-filter-pill:hover,
.goappily-frontend-status-filters .goappily-filter-pill.is-active{
    background:#eef2ff;
    border-color:#c7d2fe;
    color:#3730a3;
}

.goappily-frontend-status-filters .goappily-status-summary-pill{
    gap:8px;
    padding:8px 11px 8px 13px;
}
.goappily-frontend-status-filters .goappily-status-summary-pill strong{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:24px;
    height:24px;
    padding:0 7px;
    border-radius:999px;
    background:#f8fafc;
    color:#0f172a;
    font-size:12px;
    line-height:1;
    box-shadow:inset 0 0 0 1px rgba(148,163,184,.28);
}
.goappily-frontend-status-filters .goappily-status-summary-pill.is-active strong,
.goappily-frontend-status-filters .goappily-status-summary-pill:hover strong{
    background:#ffffff;
    color:#3730a3;
}

/* Frontend booking list status highlighting */
.goappily-frontend-table tr.goappily-booking-row.goappily-booking-status-sent td,
.goappily-frontend-table tr.goappily-booking-row.goappily-booking-status-pending td{
    background:#fff7d6;
}
.goappily-frontend-table tr.goappily-booking-row.goappily-booking-status-booked td,
.goappily-frontend-table tr.goappily-booking-row.goappily-booking-status-confirmed td{
    background:#dcfce7;
}
.goappily-frontend-table tr.goappily-booking-row.goappily-booking-status-completed td,
.goappily-frontend-table tr.goappily-booking-row.goappily-booking-status-paid td{
    background:#dbeafe;
}
.goappily-frontend-table tr.goappily-booking-row.goappily-booking-status-on-hold td,
.goappily-frontend-table tr.goappily-booking-row.goappily-booking-status-hold td{
    background:#ede9fe;
}
.goappily-frontend-table tr.goappily-booking-row.goappily-booking-status-cancelled td,
.goappily-frontend-table tr.goappily-booking-row.goappily-booking-status-canceled td{
    background:#fee2e2;
}
.goappily-frontend-table tr.goappily-booking-row.goappily-booking-status-refunded td{
    background:#cffafe;
}
.goappily-frontend-table tr.goappily-booking-row.goappily-booking-status-expired td{
    background:#f3f4f6;
}

/* Frontend order list status highlighting */
#goappily-tab-orders .goappily-order-list-table tr.goappily-customer-order-row.goappily-order-status-confirmed td{
    background:#dcfce7;
}
#goappily-tab-orders .goappily-order-list-table tr.goappily-customer-order-row.goappily-order-status-completed td{
    background:#dbeafe;
}
#goappily-tab-orders .goappily-order-list-table tr.goappily-customer-order-row.goappily-order-status-cancelled td,
#goappily-tab-orders .goappily-order-list-table tr.goappily-customer-order-row.goappily-order-status-canceled td{
    background:#fee2e2;
}
#goappily-tab-orders .goappily-order-list-table tr.goappily-customer-order-row.goappily-order-status-refunded td{
    background:#cffafe;
}
#goappily-tab-orders .goappily-order-list-table tr.goappily-customer-order-row.goappily-order-status-pending td{
    background:#fff7d6;
}

/* Frontend status summary pill colour matching */
.goappily-frontend-status-filters .goappily-filter-pill.goappily-filter-status-all{
    background:#f8fafc;
    border-color:#dbe3ef;
    color:#334155;
}
.goappily-frontend-status-filters .goappily-filter-pill.goappily-filter-status-sent,
.goappily-frontend-status-filters .goappily-filter-pill.goappily-filter-status-pending{
    background:#fff7d6;
    border-color:#fde68a;
    color:#92400e;
}
.goappily-frontend-status-filters .goappily-filter-pill.goappily-filter-status-booked,
.goappily-frontend-status-filters .goappily-filter-pill.goappily-filter-status-confirmed{
    background:#dcfce7;
    border-color:#bbf7d0;
    color:#166534;
}
.goappily-frontend-status-filters .goappily-filter-pill.goappily-filter-status-completed,
.goappily-frontend-status-filters .goappily-filter-pill.goappily-filter-status-complete,
.goappily-frontend-status-filters .goappily-filter-pill.goappily-filter-status-paid,
.goappily-frontend-status-filters .goappily-filter-pill.goappily-filter-status-processing{
    background:#dbeafe;
    border-color:#bfdbfe;
    color:#1e40af;
}
.goappily-frontend-status-filters .goappily-filter-pill.goappily-filter-status-ticketed,
.goappily-frontend-status-filters .goappily-filter-pill.goappily-filter-status-refunded{
    background:#cffafe;
    border-color:#a5f3fc;
    color:#155e75;
}
.goappily-frontend-status-filters .goappily-filter-pill.goappily-filter-status-on-hold,
.goappily-frontend-status-filters .goappily-filter-pill.goappily-filter-status-hold{
    background:#ede9fe;
    border-color:#ddd6fe;
    color:#5b21b6;
}
.goappily-frontend-status-filters .goappily-filter-pill.goappily-filter-status-expired,
.goappily-frontend-status-filters .goappily-filter-pill.goappily-filter-status-draft{
    background:#f3f4f6;
    border-color:#e5e7eb;
    color:#374151;
}
.goappily-frontend-status-filters .goappily-filter-pill.goappily-filter-status-cancelled,
.goappily-frontend-status-filters .goappily-filter-pill.goappily-filter-status-canceled,
.goappily-frontend-status-filters .goappily-filter-pill.goappily-filter-status-failed{
    background:#fee2e2;
    border-color:#fecaca;
    color:#991b1b;
}
.goappily-frontend-status-filters .goappily-filter-pill:hover,
.goappily-frontend-status-filters .goappily-filter-pill.is-active{
    filter:saturate(1.08) brightness(.985);
    box-shadow:0 3px 8px rgba(15,23,42,.12), inset 0 0 0 1px rgba(15,23,42,.08);
    transform:translateY(-1px);
}
.goappily-frontend-status-filters .goappily-status-summary-pill strong{
    background:rgba(255,255,255,.72);
}
.goappily-frontend-status-filters .goappily-status-summary-pill.is-active strong,
.goappily-frontend-status-filters .goappily-status-summary-pill:hover strong{
    background:#ffffff;
    color:inherit;
}


/* Frontend CRM polish: dependency-free status icons, hover lift and mobile cards */
.goappily-filter-status-all::before{content:"≡";}
.goappily-filter-status-sent::before{content:"➤";}
.goappily-filter-status-booked::before,
.goappily-filter-status-confirmed::before,
.goappily-filter-status-completed::before,
.goappily-filter-status-complete::before,
.goappily-filter-status-paid::before{content:"✓";}
.goappily-filter-status-pending::before,
.goappily-filter-status-processing::before{content:"◷";}
.goappily-filter-status-ticketed::before{content:"▣";}
.goappily-filter-status-on-hold::before,
.goappily-filter-status-hold::before{content:"Ⅱ";}
.goappily-filter-status-expired::before{content:"⚠";}
.goappily-filter-status-refunded::before{content:"↩";}
.goappily-filter-status-cancelled::before,
.goappily-filter-status-canceled::before,
.goappily-filter-status-failed::before{content:"×";}
.goappily-filter-status-draft::before{content:"✎";}
.goappily-frontend-status-filters .goappily-filter-pill::before{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:1em;
    min-width:1em;
    margin-right:0;
    font-family:inherit;
    font-weight:900;
    line-height:1;
}
.goappily-status-pill,
.go-status-pill{
    display:inline-flex;
    align-items:center;
    gap:0;
    border-radius:999px;
    padding:6px 10px;
    font-weight:800;
}

.goappily-frontend-table tbody tr.goappily-quote-row,
.goappily-frontend-table tbody tr.goappily-booking-row,
#goappily-tab-orders .goappily-order-list-table tbody tr.goappily-customer-order-row{
    transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.goappily-frontend-table tbody tr.goappily-quote-row:hover,
.goappily-frontend-table tbody tr.goappily-booking-row:hover,
#goappily-tab-orders .goappily-order-list-table tbody tr.goappily-customer-order-row:hover{
    transform:translateY(-2px);
    filter:saturate(1.05);
    box-shadow:0 10px 22px rgba(15,23,42,.10);
}

@media (max-width: 760px){
    .goappily-frontend-table-wrap{overflow:visible;}
    .goappily-frontend-table thead{display:none;}
    .goappily-frontend-table,
    .goappily-frontend-table tbody,
    .goappily-frontend-table tr,
    .goappily-frontend-table td{
        display:block;
        width:100%;
    }
    .goappily-frontend-table tbody tr.goappily-quote-row,
    .goappily-frontend-table tbody tr.goappily-booking-row,
    #goappily-tab-orders .goappily-order-list-table tbody tr.goappily-customer-order-row{
        border:1px solid #e5e7eb;
        border-radius:18px;
        margin:0 0 14px;
        overflow:hidden;
        box-shadow:0 10px 24px rgba(15,23,42,.08);
    }
    .goappily-frontend-table tbody tr td{
        display:flex;
        justify-content:space-between;
        gap:14px;
        text-align:right;
        border-bottom:1px solid rgba(148,163,184,.22) !important;
        padding:11px 13px !important;
        min-height:42px;
    }
    .goappily-frontend-table tbody tr td:last-child{border-bottom:0 !important;}
    .goappily-frontend-table tbody tr td::before{
        content:attr(data-label);
        flex:0 0 40%;
        text-align:left;
        font-weight:800;
        color:#334155;
    }
    .goappily-frontend-table tbody tr td.goappily-frontend-empty::before,
    .goappily-frontend-table tbody tr td.goappily-muted::before{content:"";display:none;}
    .goappily-frontend-table tbody tr td[data-label="Actions"]{
        display:flex;
        align-items:center;
        justify-content:flex-end;
        flex-wrap:wrap;
    }
    .goappily-frontend-table tbody tr td[data-label="Actions"]::before{margin-right:auto;}
    .goappily-frontend-status-filters{gap:7px;}
    .goappily-frontend-status-filters .goappily-filter-pill{padding:8px 10px;font-size:12px;}
}


/* Additional dynamic status colour coverage */
.goappily-frontend-table tr.goappily-booking-row.goappily-booking-status-ticketed td{background:#cffafe;}
#goappily-tab-orders .goappily-order-list-table tr.goappily-customer-order-row.goappily-order-status-complete td{background:#dbeafe;}
#goappily-tab-orders .goappily-order-list-table tr.goappily-customer-order-row.goappily-order-status-processing td{background:#dbeafe;}
#goappily-tab-orders .goappily-order-list-table tr.goappily-customer-order-row.goappily-order-status-failed td{background:#fee2e2;}

/* Match small status badges to the same pastel colour language */
.goappily-status-pill.goappily-filter-status-sent,
.go-status-pill.goappily-filter-status-sent,
.goappily-status-pill.goappily-filter-status-pending,
.go-status-pill.goappily-filter-status-pending{background:#fff7d6;border:1px solid #fde68a;color:#92400e;}
.goappily-status-pill.goappily-filter-status-booked,
.go-status-pill.goappily-filter-status-booked,
.goappily-status-pill.goappily-filter-status-confirmed,
.go-status-pill.goappily-filter-status-confirmed{background:#dcfce7;border:1px solid #bbf7d0;color:#166534;}
.goappily-status-pill.goappily-filter-status-completed,
.go-status-pill.goappily-filter-status-completed,
.goappily-status-pill.goappily-filter-status-complete,
.go-status-pill.goappily-filter-status-complete,
.goappily-status-pill.goappily-filter-status-paid,
.go-status-pill.goappily-filter-status-paid,
.goappily-status-pill.goappily-filter-status-processing,
.go-status-pill.goappily-filter-status-processing{background:#dbeafe;border:1px solid #bfdbfe;color:#1e40af;}
.goappily-status-pill.goappily-filter-status-ticketed,
.go-status-pill.goappily-filter-status-ticketed,
.goappily-status-pill.goappily-filter-status-refunded,
.go-status-pill.goappily-filter-status-refunded{background:#cffafe;border:1px solid #a5f3fc;color:#155e75;}
.goappily-status-pill.goappily-filter-status-on-hold,
.go-status-pill.goappily-filter-status-on-hold,
.goappily-status-pill.goappily-filter-status-hold,
.go-status-pill.goappily-filter-status-hold{background:#ede9fe;border:1px solid #ddd6fe;color:#5b21b6;}
.goappily-status-pill.goappily-filter-status-expired,
.go-status-pill.goappily-filter-status-expired,
.goappily-status-pill.goappily-filter-status-draft,
.go-status-pill.goappily-filter-status-draft{background:#f3f4f6;border:1px solid #e5e7eb;color:#374151;}
.goappily-status-pill.goappily-filter-status-cancelled,
.go-status-pill.goappily-filter-status-cancelled,
.goappily-status-pill.goappily-filter-status-canceled,
.go-status-pill.goappily-filter-status-canceled,
.goappily-status-pill.goappily-filter-status-failed,
.go-status-pill.goappily-filter-status-failed{background:#fee2e2;border:1px solid #fecaca;color:#991b1b;}