html,
body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    font-family: Arial, sans-serif;
}

*{
    box-sizing:border-box;
}

/* =========================================================
   MAIN PAGE
========================================================= */

.merchant-login-page{
    width:100%;
    min-height:100vh;
    margin:0;
    padding:0;

    background-image:url("images/background.jpeg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    position:relative;
}

.merchant-login-container{
    width:100%;
    min-height:100vh;
    display:flex;
    background:transparent;
}


/* =========================================================
   LEFT SECTION
========================================================= */

.merchant-login-left{
    width:65%;
    min-height:100vh;
    padding:20px 50px 40px 50px;
    background:transparent;
    display:flex;
    flex-direction:column;
}


/* =========================================================
   HERO AREA
========================================================= */

.merchant-hero{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    margin-top: 20px;
}

.merchant-hero-content{
    width:50%;
}

.merchant-hero-content h1{
    margin:0 0 15px 0;
    font-size:42px;
    line-height:1.15;
    color:#151515;
}

.merchant-hero-content h1 .yellow{
    color:#c89d27;
}

.merchant-hero-content p{
    margin:0 0 24px 0;
    max-width:480px;
    color:#6b6b6b;
    font-size:15px;
    line-height:24px;
}

.hero-buttons{
    display:flex;
    gap:12px;
}

.hero-btn{
    display:inline-block;
    padding:12px 22px;
    border-radius:25px;
    text-decoration:none;
    font-size:13px;
    font-weight:bold;
}

.hero-btn-primary{
    color:#ffffff;
    background:#d4ad39;
}

.hero-btn-primary:hover{
    background:#bd9627;
}

.hero-btn-secondary{
    color:#ffffff;
    background:#16966e;
}

.hero-btn-secondary:hover{
    background:#107b5a;
}


/* =========================================================
   FEATURES & OVERLAY SECTION
========================================================= */

.features-dashboard-section {
    position: relative;
    width: 100%;
    margin-top: 30px;
}

/* 4 Column Grid for Features */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    width: 100%;
}

.feature-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 16px;
    border: 1px solid #eef2f5;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    min-height: 120px;
}

/* Smart POS Active Dark Card */
.feature-card.dark-card {
    background: #0d1b3e;
    color: #ffffff;
}

.feature-card.dark-card h4, 
.feature-card.dark-card p {
    color: #ffffff !important;
}

.feature-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    font-size: 15px;
}

.icon-blue { background: #233762; color: #fff; }
.icon-yellow { background: #d4ad39; color: #fff; }
.icon-green { background: #16966e; color: #fff; }
.icon-gray { background: #e2e8f0; color: #475569; }

.feature-card h4 {
    margin: 0 0 5px 0;
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
}

.feature-card p {
    margin: 0;
    font-size: 10px;
    color: #64748b;
    line-height: 14px;
}

/* FLOATING MERCHANT STATISTICS CARD (Exact Image Placement) */
.floating-overlay-card {
    position: absolute;
    right: -83px;
    top: 50%;
    transform: translateY(-20%);
    width: 360px;
    background: #ffffff;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8ecef;
    z-index: 10;
    margin-top: -74px;
}

.floating-overlay-card h3 {
    margin: 0 0 14px 0;
    text-align: center;
    font-size: 13px;
    color: #334155;
    font-weight: bold;
}

.stats-flex {
    display: flex;
    justify-content: space-between;
    text-align: center;
    gap: 10px;
}

.stat-box p {
    margin: 0 0 4px 0;
    font-size: 9px;
    color: #64748b;
    white-space: nowrap;
}

.stat-box h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
}

/* CUSTOMER TESTIMONIALS & LOGOS BELOW OVERLAY */
.customer-section {
    margin-top: -119px;
    width: 100%;
    margin-left: 219px;
}

.customer-section h3 {
    text-align: center;
    font-size: 14px;
    margin: 0 0 2px 0;
    color: #1e293b;
}

.customer-section .subtext {
    text-align: center;
    font-size: 10px;
    color: #64748b;
    margin-bottom: 15px;
}

.testimonial-flex {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.testimonial-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    width: 200px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.testimonial-card p {
    font-size: 9px;
    color: #475569;
    margin: 0 0 8px 0;
    line-height: 12px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 6px;
}

.user-info img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

.user-details span {
    display: block;
    font-size: 9px;
    font-weight: bold;
    color: #0f172a;
}

.user-details small {
    font-size: 7px;
    color: #94a3b8;
}

/* Partners Footer Logos */
.partner-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    margin-top: 15px;
    font-size: 11px;
    font-weight: bold;
    color: #64748b;
    opacity: 0.7;
}

/* APP DOWNLOAD BUTTONS */
.app-download-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

.btn-app-store, .btn-google-play {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #000000;
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 8px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.btn-app-store:hover, .btn-google-play:hover {
    opacity: 0.85;
}

.app-icon {
    font-size: 18px;
    line-height: 1;
}

.app-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.app-text small {
    font-size: 7px;
    color: #cbd5e1;
    text-transform: uppercase;
    line-height: 1;
}

.app-text span {
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    line-height: 1.2;
}


/* =========================================================
   RIGHT SECTION (LOGIN FORM)
========================================================= */

.merchant-login-right{
    width:35%;
    min-height:100vh;
    padding:50px;
    background:transparent;
    display:flex;
    align-items:center;
    justify-content:center;
}

.login-box{
    width:100%;
    max-width:480px;
    background:#ffffff;
    padding:45px;
    border-radius:20px;
    border:1px solid #e1e7eb;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
}

.login-title{
    text-align:center;
    margin-bottom:30px;
}

.login-title h2{
    margin:0;
    color:#151515;
    font-size:30px;
}

.login-title p{
    margin:8px 0 0 0;
    color:#777;
    font-size:13px;
}

.account-label{
    margin-bottom:8px;
    color:#444;
    font-size:12px;
    font-weight:bold;
}

.account-type{
    display:flex;
    width:100%;
    padding:4px;
    margin-bottom:25px;
    border-radius:25px;
    background:#edf1f3;
}

.account-type span{
    width:50%;
    padding:10px;
    text-align:center;
    border-radius:22px;
    color:#777;
    font-size:12px;
}

.account-type span.active{
    background:#ffffff;
    color:#222;
    font-weight:bold;
    box-shadow:0 2px 7px rgba(0,0,0,.08);
}

.login-form-group{
    width:100%;
    margin-bottom:20px;
}

.login-form-group label{
    display:block;
    margin-bottom:8px;
    color:#444;
    font-size:13px;
    font-weight:bold;
}

.login-input{
    width:100%;
    height:48px;
    padding:0 15px;
    border:1px solid #d7dde2;
    border-radius:9px;
    background:#ffffff;
    color:#333;
    font-size:13px;
    outline:none;
}

.login-input:focus{
    border-color:#0f4db8;
    box-shadow:0 0 8px rgba(15,77,184,.12);
}

.password-wrapper{
    position:relative;
}

.password-wrapper .login-input{
    padding-right:45px;
}

.password-eye{
    position:absolute;
    right:15px;
    top:14px;
    color:#888;
    cursor:pointer;
    font-size:15px;
}

.login-options{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:25px;
    font-size:12px;
}

.remember-me{
    color:#666;
}

.remember-me input{
    vertical-align:middle;
    margin-right:5px;
}

.forgot-link{
    color:#16876a;
    font-weight:bold;
    text-decoration:none;
}

.forgot-link:hover{
    text-decoration:underline;
}

.login-submit{
    width:100%;
    height:48px;
    border:0;
    border-radius:25px;
    background:#d5ad38;
    color:#ffffff;
    font-size:14px;
    font-weight:bold;
    cursor:pointer;
}

.login-submit:hover{
    background:#c39927;
}

.create-account{
    display:block;
    width:100%;
    height:48px;
    line-height:48px;
    margin-top:15px;
    text-align:center;
    border:1px solid #ccd4d9;
    border-radius:25px;
    background:#ffffff;
    color:#333;
    text-decoration:none;
    font-size:13px;
    font-weight:bold;
}

.create-account:hover{
    background:#f4f7f9;
}

.quick-support{
    margin-top:28px;
    text-align:center;
    color:#777;
    font-size:11px;
}

.quick-support-title{
    margin-bottom:8px;
    color:#444;
    font-weight:bold;
}

.quick-support a{
    color:#666;
    text-decoration:none;
    margin:0 5px;
}

.quick-support a:hover{
    color:#0f4db8;
}

#frm_login label.login-error{
    display:block;
    margin-top:5px;
    padding-left:16px;
    background:url("images/unchecked.gif") no-repeat 0 3px;
    color:#ff0000;
    font-size:11px;
    font-weight:bold;
}

#frm_login label.checked{
    background:url("images/checked.gif") no-repeat 0 3px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media screen and (max-width:1200px){
    .merchant-login-left{ padding:35px; }
    .merchant-login-right{ padding:35px; }
    .floating-overlay-card{ position: relative; right: 0; top: 0; transform: none; width: 100%; margin-top: 20px; }
    .customer-section{ margin-left:0; margin-top:30px; }
}

@media screen and (max-width:950px){
    .merchant-login-container{ flex-direction:column; }
    .merchant-login-left, .merchant-login-right{ width:100%; min-height:auto; padding:35px; }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width:600px){
    .merchant-login-left{ padding:25px 18px; }
    .merchant-login-right{ padding:20px 15px; }
    .merchant-hero-content h1{ font-size:32px; }
    .features-grid{ grid-template-columns:1fr; }
    .login-box{ padding:28px 20px; }
}