/* ============================================================
   HARD RESET — neutralise every rule from style.css / demo.css
============================================================ */
html, body, div, span, h1, h2, h3, h4, h5, h6,
p, a, label, input, button, form, nav, header,
section, article, aside, footer, ul, li, img {
    all: unset;
    box-sizing: border-box;
}
*, *::before, *::after { box-sizing: border-box; }

/* ============================================================
   BASE
============================================================ */
html {
    height: 100%;
    font-size: 15px;
}
body {
    display: block;
    min-height: 100vh;
    height: 100%;
    background: #dff0e8;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    color: #1a2e23;
}

/* ============================================================
   MALL BUTTON
============================================================ */
#mall-float {
    position: fixed !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 52px !important;
    height: 64px !important;
    border-radius: 14px 0 0 14px !important;
    background: #0F6E56 !important;
    box-shadow: -3px 0 16px rgba(10,50,30,0.22) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background 0.18s, box-shadow 0.18s !important;
}
#mall-float:hover {
    background: #085041 !important;
    box-shadow: -4px 0 22px rgba(10,50,30,0.34) !important;
}
#mall-float::after {
    content: 'Store' !important;
    display: block !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #9FE1CB !important;
    letter-spacing: 0.04em !important;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif !important;
}
#logo100 {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid #9FE1CB !important;
    background: #04342C !important;
}

/* ============================================================
   HIDDEN ANCHORS
============================================================ */
.hiddenanchor {
    display: block !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    position: absolute !important;
}

/* ============================================================
   PAGE SHELL — centres the card
============================================================ */
.gbox-shell {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    padding: 2rem 1rem !important;
    direction: ltr !important;   /* outer wrapper always LTR */
}

/* ============================================================
   CARD — two columns, brand LEFT, form RIGHT
============================================================ */
.gbox-card {
    display: grid !important;
    grid-template-columns: 290px 1fr !important;
    grid-template-rows: auto !important;
    width: 100% !important;
    max-width: 800px !important;
    min-height: 540px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 50px rgba(10,50,30,0.18) !important;
    direction: ltr !important;
}

/* ============================================================
   BRAND PANEL — column 1
============================================================ */
.gbox-brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    background: #0F6E56 !important;
    padding: 2.4rem 1.8rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    position: relative !important;
    overflow: hidden !important;
    direction: ltr !important;
}
.gbox-brand::before {
    content: '' !important;
    position: absolute !important;
    width: 230px !important; height: 230px !important;
    border-radius: 50% !important;
    background: rgba(4,52,44,0.42) !important;
    top: -60px !important; right: -60px !important;
    pointer-events: none !important;
}
.gbox-brand::after {
    content: '' !important;
    position: absolute !important;
    width: 160px !important; height: 160px !important;
    border-radius: 50% !important;
    background: rgba(4,52,44,0.30) !important;
    bottom: -38px !important; left: -38px !important;
    pointer-events: none !important;
}
.brand-inner { position: relative !important; z-index: 1 !important; }

.b-logo-box {
    width: 58px !important; height: 58px !important;
    background: #04342C !important;
    border-radius: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 1.3rem !important;
    overflow: hidden !important;
}
.b-logo-box img {
    display: block !important;
    width: 42px !important; height: 42px !important;
    object-fit: contain !important;
}
.b-title {
    display: block !important;
    font-size: 1.38rem !important;
    font-weight: 700 !important;
    color: #E1F5EE !important;
    line-height: 1.25 !important;
    margin-bottom: 0.4rem !important;
    text-align: left !important;
}
.b-tag {
    display: block !important;
    font-size: 0.76rem !important;
    color: #9FE1CB !important;
    line-height: 1.6 !important;
    margin-bottom: 1.8rem !important;
    text-align: left !important;
}
.b-feats { display: flex !important; flex-direction: column !important; gap: 0.8rem !important; }
.b-feat  { display: flex !important; align-items: flex-start !important; gap: 9px !important; direction: ltr !important; }
.b-feat-dot {
    width: 27px !important; height: 27px !important;
    border-radius: 50% !important;
    background: #085041 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: 13px !important; color: #5DCAA5 !important;
    line-height: 1 !important;
}
.b-feat-txt {
    display: block !important;
    font-size: 0.75rem !important;
    color: #9FE1CB !important;
    line-height: 1.45 !important;
    padding-top: 4px !important;
    text-align: left !important;
}
.b-footer {
    position: relative !important; z-index: 1 !important;
    font-size: 0.67rem !important; color: #5DCAA5 !important;
    margin-top: 1.6rem !important;
    text-align: left !important;
    display: block !important;
}
.b-footer a { color: #5DCAA5 !important; text-decoration: none !important; }
.b-footer a:hover { color: #E1F5EE !important; text-decoration: underline !important; }

/* ============================================================
   FORM PANEL — column 2 (direction handled by body class)
============================================================ */
.gbox-form-panel {
    grid-column: 2 !important;
    grid-row: 1 !important;
    background: #ffffff !important;
    padding: 2rem 1.9rem !important;
    display: flex !important;
    flex-direction: column !important;
}
body.ltr .gbox-form-panel { direction: ltr !important; }
body.rtl .gbox-form-panel { direction: rtl !important; }

/* ---- Language bar ---- */
.lang-bar {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    margin-bottom: 1.2rem !important;
    direction: ltr !important;
}
.lang-bar a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 0.72rem !important;
    color: #3d6b54 !important;
    text-decoration: none !important;
    padding: 3px 9px !important;
    border: 1px solid #c5e0d4 !important;
    border-radius: 20px !important;
    background: #f5fbf8 !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
}
.lang-bar a:hover { background: #1D9E75 !important; color: #fff !important; border-color: #1D9E75 !important; }
.lang-bar img { display: inline-block !important; width: 18px !important; height: 12px !important; border-radius: 2px !important; vertical-align: middle !important; }

/* ---- Tab nav ---- */
.tab-nav {
    display: flex !important;
    flex-direction: row !important;
    border-bottom: 2px solid #e4efe9 !important;
    margin-bottom: 1.4rem !important;
    gap: 0 !important;
    direction: ltr !important;
}
.tab-nav a {
    display: block !important;
    padding: 7px 13px !important;
    font-size: 0.79rem !important;
    font-weight: 600 !important;
    color: #7aaa92 !important;
    text-decoration: none !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: color 0.15s !important;
}
.tab-nav a:hover { color: #0F6E56 !important; }
.tab-nav a.tab-active { color: #0F6E56 !important; border-bottom-color: #1D9E75 !important; }

/* ---- Section show/hide ---- */
.gbox-section {
    display: none !important;
    flex-direction: column !important;
    flex: 1 !important;
}
body.ltr .gbox-section { direction: ltr !important; }
body.rtl .gbox-section { direction: rtl !important; }
.gbox-section.show { display: flex !important; }

/* ---- Headings ---- */
.sec-head {
    display: block !important;
    font-size: 1.18rem !important;
    font-weight: 700 !important;
    color: #0F6E56 !important;
    margin-bottom: 0.2rem !important;
}
body.ltr .sec-head { text-align: left !important; }
body.rtl .sec-head { text-align: right !important; }

.sec-sub {
    display: block !important;
    font-size: 0.77rem !important;
    color: #7aaa92 !important;
    margin-bottom: 1.1rem !important;
    line-height: 1.5 !important;
}
body.ltr .sec-sub { text-align: left !important; }
body.rtl .sec-sub { text-align: right !important; }

/* ---- Error block ---- */
.err-block {
    display: block !important;
    background: #fff5f5 !important;
    border: 1px solid #fca5a5 !important;
    border-radius: 8px !important;
    padding: 7px 11px !important;
    font-size: 0.78rem !important;
    color: #b91c1c !important;
    margin-bottom: 0.8rem !important;
}
.err-block:empty { display: none !important; }

/* ---- Field group ---- */
.fgroup {
    display: block !important;
    margin-bottom: 0.8rem !important;
}
.fgroup label {
    display: block !important;
    font-size: 0.73rem !important;
    font-weight: 600 !important;
    color: #3d6b54 !important;
    margin-bottom: 4px !important;
}
body.ltr .fgroup label { text-align: left !important; }
body.rtl .fgroup label { text-align: right !important; }

.fwrap {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}
.fwrap .ico {
    position: absolute !important;
    font-size: 14px !important;
    color: #9FE1CB !important;
    pointer-events: none !important;
    z-index: 1 !important;
    line-height: 1 !important;
}
body.ltr .fwrap .ico { left: 10px !important; right: auto !important; }
body.rtl .fwrap .ico { right: 10px !important; left: auto !important; }

.fwrap input {
    display: block !important;
    width: 100% !important;
    height: 40px !important;
    font-size: 0.84rem !important;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif !important;
    color: #1a2e23 !important;
    background: #f5fbf8 !important;
    border: 1.5px solid #c5e0d4 !important;
    border-radius: 9px !important;
    outline: none !important;
    direction: ltr !important;
    text-align: left !important;
    transition: border-color 0.18s, box-shadow 0.18s !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
body.ltr .fwrap input { padding: 0 10px 0 34px !important; }
body.rtl .fwrap input { padding: 0 34px 0 10px !important; }

.fwrap input:focus {
    border-color: #1D9E75 !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(29,158,117,0.13) !important;
}
.fwrap input::placeholder { color: #b0ccbf !important; }

/* ---- Submit button ---- */
.btn-g {
    display: block !important;
    width: 100% !important;
    height: 42px !important;
    background: #1D9E75 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 9px !important;
    font-size: 0.90rem !important;
    font-weight: 700 !important;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif !important;
    cursor: pointer !important;
    margin-top: 0.4rem !important;
    transition: background 0.18s !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    text-align: center !important;
    direction: ltr !important;
}
.btn-g:hover { background: #0F6E56 !important; }

/* ---- Links row ---- */
.lrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 5px 12px !important;
    margin-top: 0.85rem !important;
    font-size: 0.76rem !important;
}
.lrow a { display: inline !important; color: #0F6E56 !important; text-decoration: none !important; font-weight: 600 !important; cursor: pointer !important; }
.lrow a:hover { text-decoration: underline !important; }
.lrow .sep { color: #c5e0d4 !important; }

/* ---- Copyright ---- */
.cpline {
    display: block !important;
    font-size: 0.67rem !important;
    color: #7aaa92 !important;
    text-align: center !important;
    margin-top: 1rem !important;
}
.cpline a { color: #1D9E75 !important; text-decoration: none !important; }
.cpline a:hover { text-decoration: underline !important; }

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 660px) {
    .gbox-card { grid-template-columns: 1fr !important; }
    .gbox-brand { display: none !important; }
    .gbox-form-panel { grid-column: 1 !important; }
}