/* Global font family - legible sans-serif stack */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.gsw-top{display:flex;align-items:center;gap:12px;padding:12px 24px;background:#fff;border-bottom:1px solid rgba(0,0,0,0.05);}
.gsw-top img{height:40px;width:auto;display:block}
.gsw-top .gsw-site-name{font-weight:700;font-size:1.1rem;color:#333}
@media(max-width:480px){.gsw-top{padding:10px}.gsw-top img{height:32px}.gsw-top .gsw-site-name{font-size:1rem}}

/* Header: two-row layout with left/right divs on top row */
.gsw-header{display:flex;flex-direction:column;align-items:stretch;padding:0;background:transparent;margin-bottom:18px;}

/* Top row: contains left (logo/title) and right (login) divs as separate blocks */
#gsw-site .gsw-header-top{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:12px 20px;background:#0b3b6f !important;backdrop-filter:blur(6px);box-shadow:0 2px 6px rgba(0,0,0,0.18);width:100%;}

/* Left div: logo + title, takes up available space */
#gsw-site .gsw-header-left{flex:1 1 auto;display:flex;align-items:center;font-weight:700;font-size:1.4rem;color:#fff;padding-left:8px;}

/* Right div: login/logout button area, shrinks to content */
#gsw-site .gsw-header-right{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:12px;padding-right:8px;}

.gsw-logo{height:48px;width:auto;margin-right:12px;display:block}
.gsw-logo-link{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.gsw-header-left a{color:#fff;text-decoration:none;}

/* Bottom row: centered navigation menu */
#gsw-site .gsw-header-bottom{display:flex;justify-content:center;padding:10px 20px;background:#0b3b6f !important;width:100%;}
.gsw-header-nav{display:flex;gap:22px;align-items:center;}
.gsw-nav-link{color:#fff;text-decoration:none;font-size:0.98rem;transition:opacity 0.2s;padding:6px 8px;border-radius:6px;}
.gsw-nav-link:hover{opacity:0.9;text-decoration:underline;background:rgba(255,255,255,0.03);}
/* My Account link styling - larger font in middle of menu */
.gsw-nav-link-myaccount{font-size:1.15rem;font-weight:600;padding:6px 12px;}

.gsw-user-info{color:#fff;font-size:0.95rem;margin-right:8px;}

/* Login/Logout button with gradient */
#gsw-site .gsw-header-btn,
#gsw-site a.gsw-header-btn{padding:10px 18px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%) !important;color:#fff !important;border-radius:8px;text-decoration:none;font-weight:700;transition:transform 0.2s;border:none;display:inline-block;cursor:pointer;}
#gsw-site .gsw-header-btn:hover,
#gsw-site a.gsw-header-btn:hover{transform:translateY(-2px);text-decoration:none;color:#fff !important;}
@media(max-width:768px){
  .gsw-header{flex-direction:column;gap:12px;}
  .gsw-header-nav{flex-wrap:wrap;justify-content:center;}
}

/* Banner styling (index only) */
.gsw-banner{width:100%;text-align:center;margin-bottom:18px}
.gsw-banner img{max-width:100%;height:auto;display:inline-block}

/* Footer styles: ultra-specific to override any theme CSS */
html body #gsw-site footer.gsw-footer{background:#0b3b6f !important;color:#fff;padding:18px 12px;text-align:center;margin-top:28px;}
#gsw-site footer.gsw-footer a{color:#cfe6ff;text-decoration:none;}
#gsw-site footer.gsw-footer a:hover{text-decoration:underline;}

/* Page color scheme: prefer dark text on light backgrounds by default */
/* Dark site theme: dark background with light text */
body { color: #fff; background: #0b1020; }

/* Make links readable on dark background */
a { color: #7fb3ff; }
/* But override for styled buttons/links inside our site wrapper */
#gsw-site a.gsw-btn,
#gsw-site a.gsw-btn-secondary,
#gsw-site a.gsw-header-btn,
#gsw-site .gsw-nav-link{color:#fff !important;}

/* Form inputs: light text on darker inputs by default */
input, textarea, select, button { color: #fff; background: #11141f; border: 1px solid rgba(255,255,255,0.06); }

.cart-badge{display:inline-block;background:#ff3b30;color:#fff;font-size:0.8rem;padding:2px 6px;border-radius:12px;margin-left:6px;vertical-align:middle}
.site-panel{width:100%; max-width:1000px; margin:auto; padding:1rem; background:rgba(0,0,0,0.25); border-radius:0.75rem;}
.site-panel-title{font-size:1.5rem; font-weight:bold; color:#fff; margin-bottom:1.5rem; text-align:center}
.cart-table{border-collapse:separate; border-spacing:0; width:100%; color:#fff}
.cart-table thead{background:rgba(255,255,255,0.03)}
.cart-table th, .cart-table td{padding:1rem 1.5rem; text-align:left; border-bottom:1px solid rgba(255,255,255,0.03)}
.cart-total-row{background:transparent; font-weight:bold}
.cart-total-label{padding:1rem 1.5rem; text-align:right; border-top:2px solid rgba(255,255,255,0.06); font-weight:600; color:#fff}
.cart-total-value{padding:1rem 1.5rem; text-align:left; border-top:2px solid rgba(255,255,255,0.06); font-weight:600; color:#fff; font-size:1.1rem}

/* Utility classes */
.container-wide{width:100%; max-width:1000px; margin:28px auto;}
.panel{background:rgba(0,0,0,0.25); padding:16px; border-radius:8px}
.muted{color:rgba(255,255,255,0.6)}
.center{text-align:center}
.pad-40{padding:40px}
.btn-danger{background:#ef4444;color:#fff;border:none;padding:6px 10px;border-radius:6px}
.btn-primary{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;padding:8px 14px;border-radius:8px;font-weight:700}

/* Primary gradient button for links and buttons */
#gsw-site .gsw-btn,
#gsw-site a.gsw-btn,
#gsw-site button.gsw-btn{display:inline-block;padding:12px 24px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%) !important;color:#fff !important;text-decoration:none;border-radius:8px;font-weight:600;transition:transform 0.2s;border:none;cursor:pointer;}
#gsw-site .gsw-btn:hover,
#gsw-site a.gsw-btn:hover,
#gsw-site button.gsw-btn:hover{transform:translateY(-2px);color:#fff !important;text-decoration:none;}

/* Renew button: slightly smaller but matching gradient, used on My Account cards */
#gsw-site .renew-btn, #gsw-site a.renew-btn, #gsw-site button.renew-btn{
    display:inline-block;
    padding:8px 14px;
    background:linear-gradient(135deg,#f59e0b 0%,#ef4444 100%) !important;
    color:#fff !important;
    text-decoration:none;
    border-radius:8px;
    font-weight:700;
    transition:transform 0.12s;
    border:none;
    cursor:pointer;
}
#gsw-site .renew-btn:hover, #gsw-site a.renew-btn:hover, #gsw-site button.renew-btn:hover{transform:translateY(-2px);}

#gsw-site .gsw-btn-secondary,
#gsw-site a.gsw-btn-secondary{display:inline-block;padding:10px 16px;background:rgba(255,255,255,0.06);color:#fff !important;text-decoration:none;border-radius:8px;border:1px solid rgba(255,255,255,0.06);cursor:pointer;}
#gsw-site .gsw-btn-secondary:hover,
#gsw-site a.gsw-btn-secondary:hover{color:#fff !important;text-decoration:none;}
.float-left{float:left}
.clearfix::after{content:"";display:table;clear:both}
.table-compact th,.table-compact td{padding:0.5rem}

/* Small spacing utilities used by a few pages */
.mb-18{margin-bottom:18px}
.mt-6{margin-top:6px}
.mt-12{margin-top:12px}

/* Padding helper used where a wider card/panel is desired */
.p-30-20{padding:30px 20px}

/* Decorative container used in a few places */
.decorative-bottom{border:4px solid transparent;border-bottom:25px solid transparent}

/* Inline form helper (used for small inline forms inside table cells) */
.inline-form{margin:0;display:inline}

/* Small square button (used for delete icons) */
.btn-square{width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;font-weight:bold;border-radius:0.25rem;border:none}

.text-right{text-align:right}
.text-danger{color:#ef4444}
.text-center{text-align:center}

/* small helpers for admin server list inputs */
.min-w-260{min-width:260px}
.min-w-240{min-width:240px}
.w-90{width:90px}
.img-preview{max-height:48px; max-width:120px; border:1px solid #eee; display:block}
.loc-label{border:1px solid #eee;border-radius:6px;padding:6px 8px; display:inline-flex; align-items:center}
.small-muted{color:#777;font-size:12px;margin-top:2px}

/* PayPal status */
.pp-status{margin-top:12px;font:14px system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif}

/* AI UI helpers */
.ai-container{max-width:760px; margin:20px auto; font-family:Arial, sans-serif}
.ai-panel{margin:10px 0; padding:8px; border-radius:6px}
.ai-alert{margin:10px 0; padding:8px; border-radius:6px; border:1px solid #c00}
.ai-textarea{width:100%; padding:6px}
.ai-message{margin-top:16px; padding:10px; border:1px solid #ccc; border-radius:8px}
.ai-msg-title{font-weight:bold}
.ai-msg-meta{margin-top:6px; font-size:12px}
.flex-gap-wrap{display:flex;flex-wrap:wrap;gap:10px}
.table-center{text-align:center;width:100%;border-collapse:collapse}
.tb-row-bottom{border-bottom:1px solid #f0f0f0;padding:8px 6px;text-align:left}
.locs-box{display:flex;flex-wrap:wrap;gap:8px}
.mb-12{margin-bottom:12px}
.mt-10{margin-top:10px}
.mt-14{margin-top:14px}
.mt-20{margin-top:20px}
.mt-8{margin-top:8px}
.btn-small{padding:3px 8px;font-size:12px}
.mr-6{margin-right:6px}
.ml-8{margin-left:8px}
.flex-row-gap{display:flex;gap:8px;align-items:center}

/* Account page styles */
.account-container{max-width:1000px;margin:20px auto;padding:20px}
.account-section{background:rgba(0,0,0,0.25);padding:20px;border-radius:8px;margin-bottom:20px}
.account-section h2{margin:0 0 15px 0;font-size:1.3rem;color:#fff;border-bottom:2px solid rgba(255,255,255,0.1);padding-bottom:10px}
.account-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:15px}
.account-info-item{padding:10px;background:rgba(255,255,255,0.03);border-radius:6px}
.account-info-label{font-weight:600;color:rgba(255,255,255,0.7);font-size:0.9rem;margin-bottom:5px}
.account-info-value{color:#fff;font-size:1rem}
.account-edit-summary{cursor:pointer;color:#667eea;font-weight:600;margin-top:10px}

/* Form styles */
.form-group{margin-bottom:15px}
.form-group label{display:block;margin-bottom:5px;color:#fff;font-weight:500}
.form-group input{width:100%;padding:10px;border:1px solid rgba(255,255,255,0.1);border-radius:6px;background:rgba(0,0,0,0.3);color:#fff}

/* Alert messages */
.alert{padding:12px 16px;border-radius:8px;margin-bottom:20px;font-size:0.95rem}
.alert-error{background-color:rgba(255,0,0,0.2);border:1px solid rgba(255,0,0,0.3);color:#ffcccc}
.alert-success{background-color:rgba(0,255,0,0.2);border:1px solid rgba(0,255,0,0.3);color:#ccffcc}

/* Server item cards */
.server-item{background:rgba(255,255,255,0.03);padding:15px;border-radius:6px;margin-bottom:10px;border-left:3px solid #667eea}
.server-name{font-size:1.1rem;font-weight:600;color:#fff;margin-bottom:8px}
.server-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:10px}
.server-detail{font-size:0.9rem}
.server-detail-label{color:rgba(255,255,255,0.6)}
.server-detail-value{color:#fff;font-weight:500}

/* Invoice items */
.invoice-item{background:rgba(255,255,255,0.03);padding:12px 15px;border-radius:6px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.invoice-id{font-weight:600;color:#fff}
.invoice-amount{color:#10b981;font-weight:600}
.invoice-status{padding:4px 10px;border-radius:4px;font-size:0.85rem;font-weight:600}
.invoice-status-paid{background:rgba(16,185,129,0.2);color:#10b981}
.invoice-status-pending{background:rgba(245,158,11,0.2);color:#f59e0b}
.invoice-status-expired{background:rgba(239,68,68,0.2);color:#ef4444}
.invoice-date{color:rgba(255,255,255,0.6);font-size:0.9rem}

/* Login placeholder for non-logged-in users */
.login-placeholder{padding:12px;background:rgba(255,255,255,0.03);border-radius:8px;color:#fff}
.login-placeholder a{color:#cfe6ff;text-decoration:underline}

/* No data state */
.no-data{text-align:center;padding:30px;color:rgba(255,255,255,0.6)}

/* Service description text */
.service-desc{color:gray;width:230px}
.service-desc-wide{color:gray;width:280px}
.service-textarea{resize:none;width:230px;height:132px}

/* Admin helpers */
.admin-note{font-size:11px;color:#666;margin-top:4px}
.admin-flex-wrap{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}

@media (max-width:768px){
  .account-info-grid{grid-template-columns:1fr}
}

/* Responsive improvements for mobile devices */
@media (max-width: 600px) {
    /* Stack header top and make logo smaller */
    #gsw-site .gsw-header-top{flex-direction:column;align-items:flex-start;padding:10px 12px}
    #gsw-site .gsw-header-left{width:100%;justify-content:flex-start;padding-left:4px}
    .gsw-logo{height:40px}
    .gsw-site-name{font-size:1rem}

    /* Make header right area flow beneath the logo */
    #gsw-site .gsw-header-right{width:100%;margin-top:8px;justify-content:flex-start;padding-right:4px;gap:8px}

    /* Navigation: wrap and stack for easier tapping */
    #gsw-site .gsw-header-bottom{padding:8px 12px}
    .gsw-header-nav{flex-direction:column;align-items:stretch;gap:10px;width:100%}
    .gsw-nav-link{display:block;padding:12px 10px;border-radius:8px}
    .gsw-nav-link-myaccount{font-size:1rem}

    /* Make main panel use full width with reduced padding */
    .site-panel{padding:0.75rem;margin:8px;border-radius:0.5rem}

    /* Tables and cart spacing adjustments */
    .cart-table th, .cart-table td{padding:0.6rem 0.8rem}

    /* Buttons become full-width for easier tapping on small screens */
    #gsw-site .gsw-btn, #gsw-site a.gsw-btn, #gsw-site button.gsw-btn, #gsw-site .gsw-header-btn{
        width:100%;display:block;text-align:center;padding:12px;border-radius:10px
    }

    /* Server cards: stack details and move actions below */
    .server-details{grid-template-columns:1fr}
    .server-actions{margin-top:12px;display:block}
    .server-item{padding:12px}

    /* Forms: make inputs and action buttons full width */
    .form-group input, .form-group textarea, .form-group select{width:100%;box-sizing:border-box}

    /* Invoice items: stack label and amount for readability */
    .invoice-item{flex-direction:column;align-items:flex-start;gap:8px}
    .invoice-amount{font-size:1rem}
}

@media (max-width:420px){
    /* Extra small devices: tighten spacing, smaller fonts */
    .gsw-logo{height:34px}
    .gsw-site-name{font-size:0.95rem}
    .site-panel-title{font-size:1.25rem}
    .server-name{font-size:1rem}
    .account-section h2{font-size:1.1rem}

    /* Reduce large paddings that consume screen real estate */
    .panel{padding:10px}
    .form-group{margin-bottom:12px}
    .btn-primary, .btn-small{padding:10px}
}

/* Server status and utility classes */
#gsw-site .text-success {
    color: #10b981 !important;
    font-weight: 600 !important;
}

#gsw-site .text-danger {
    color: #ef4444 !important;
    font-weight: 600 !important;
}

#gsw-site .text-muted {
    color: rgba(255,255,255,0.7) !important;
}

#gsw-site .text-center {
    text-align: center !important;
}

#gsw-site .mb-20 {
    margin-bottom: 20px !important;
}

#gsw-site .server-notes {
    padding-left: 40px !important;
    font-size: 0.9rem !important;
    color: rgba(255,255,255,0.7) !important;
}

/* Status badges */
#gsw-site .status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
}

#gsw-site .status-online {
    background-color: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

#gsw-site .status-offline {
    background-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

#gsw-site .status-maintenance {
    background-color: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

#gsw-site .status-unknown {
    background-color: rgba(156, 163, 175, 0.2);
    color: #9ca3af;
}

/* Form radio labels in renewal page */
#gsw-site .form-group label {
    display: block;
    margin-bottom: 10px;
    cursor: pointer;
    padding: 12px;
    border: 2px solid #e1e8ed;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    transition: background 0.2s ease;
}

#gsw-site .form-group label:hover {
    background: rgba(255,255,255,0.1);
}

/* Ensure header-right sits flush to the far right */
#gsw-site .gsw-header-top .gsw-header-right{margin-left:auto}

/* User dropdown menu (small, CSS-only). Uses :focus-within and :hover for accessibility */
.gsw-user-menu{position:relative;display:inline-block}
.gsw-user-link{color:#fff;text-decoration:none;font-weight:600;padding:8px 12px;display:inline-block}
.gsw-user-caret{margin-left:6px;font-size:0.85rem;opacity:0.85}
.gsw-user-dropdown{display:none;position:absolute;right:0;top:calc(100% + 8px);background:rgba(255,255,255,0.06);backdrop-filter:blur(6px);border-radius:8px;padding:8px;min-width:160px;box-shadow:0 8px 24px rgba(0,0,0,0.35);z-index:60}
.gsw-user-dropdown-item{display:block;color:#fff;text-decoration:none;padding:8px 10px;border-radius:6px;margin:2px 0}
.gsw-user-dropdown-item:hover{background:rgba(255,255,255,0.03)}
.gsw-user-menu:hover .gsw-user-dropdown, .gsw-user-menu:focus-within .gsw-user-dropdown{display:block}

/* Mobile: make dropdown inline under header and full-width */
@media (max-width:600px){
    .gsw-user-dropdown{position:static;top:auto;right:auto;margin-top:8px;background:rgba(255,255,255,0.03);width:100%;box-shadow:none;padding:6px}
    .gsw-user-menu{width:100%}
    .gsw-user-link{width:100%;display:flex;justify-content:space-between;padding:12px}
}

/* Prevent serverlist images from overflowing on small screens */
#gsw-site .server-item img,
#gsw-site .game-thumb,
#gsw-site .server-card img,
.server-list img{max-width:100%;height:auto;display:block;object-fit:cover}