a {
    text-decoration: none;
    color: #ff7043;
}
button:focus{
    box-shadow: none;
}
.btn:focus {
    box-shadow: none;
}
.form-check-input:focus{
    box-shadow: none;
}
a:hover{
    color: #2e2e2e;
}
.form-control:focus{
    box-shadow: none;
    border-color: #ff7043;
}
.form-control::-webkit-input-placeholder{
    color: rgba(187, 187, 188, 1);
}
.auth-wrapper{
    margin:60px auto;    
    overflow:hidden;
    margin-top: 130px;
    padding-bottom: 26px;
}
.auth-wrapper .auth-row{
    border-radius:16px;
    background:#fff;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    overflow: hidden;
    margin: 2px;
}
/* ---------- LEFT SIDE ---------- */
.left-panel{
    background:#f47c56;
    color:#fff;
    padding:50px 40px;
    height:100%;
    display: flex;
    flex-direction: column;
}
.left-panel h2{
    font-weight:700;
    color: #ffff;
}
.left-desc{
    opacity:.9;
    font-size:14px;
    color: #ffffff;
}
.reward-box{
    background:rgba(255,255,255,0.2);
    padding:14px;
    border-radius:10px;
    margin-top:30px;
}
.family-img{
    background:rgba(253, 253, 253, 1);
    border-radius:14px;
    padding:15px;
    margin-top:auto;
    text-align:center;
}
.family-img img{
    max-width:100%;
}

/* ---------- RIGHT SIDE ---------- */
.right-panel{
    padding:50px 40px;
}
.right-panel .form-control{
    padding: 12px 14px;
    border-radius: 6px;
    border-color: rgba(0, 0, 0, 0.08);
    height: auto;
}
.right-panel .input-group-text{
    background-color: transparent;
    border-color: rgba(0, 0, 0, 0.08);
}
.right-panel .input-group .icon{
    height: 20px;
    width: 20px;
    object-fit: contain;
}
.right-panel .form-select{
    padding: 12px 14px;
}
.right-panel .form-select.country-code{
    border-color: rgba(0, 0, 0, 0.08);
    border-right: 0;
}
.right-panel .form-check-input{
    border-radius: 50px;
}
.right-panel .form-check-label{
    font-family: 'Gotham-light';
    font-size: 14px;
}
.right-panel .form-check-input:checked{
    background-color: rgba(255, 112, 67, 1); 
    border-color: rgba(255, 112, 67, 1);
}
.btn-sign{
    background: #ff7a4f;
    border: none;
    padding: 14px;
    border-radius: 12px;
    font-weight: 600;
    color: #fff;
}
.btn-sign:focus{ box-shadow: none; }
.btn-sign:hover{ background:#ef6c45; color:#fff; }
.email-text{
    position: relative;
    z-index: 1;
    margin: 12px 0;
}
.email-text::after{   
    position: absolute;
    top: 50%;
    content: "";
    background-color: rgba(0, 0, 0, 0.08);
    height: 2px;
    width: 100%;
    left: 0;
    z-index: -1;
}
.social-btn{
    border:1px solid #eee;
    border-radius: 6px;
    height:44px;
    background:rgba(248, 248, 248, 1);
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
}
.social-btn.apple-btn{
    background-color: rgba(26, 28, 30, 1);
    color: #ffffff;
}
.small-text{ font-size: 14px; color:#888; }
.email-text span{
    background-color: #ffffff;
    padding: 0 12px;
    font-family: 'Gotham-light';
}
.login-link{ color:#f47c56; text-decoration:none; font-weight:500; }
.sign-title{ font-size: 30px; }
.remember-check .form-check-input{ border-radius: 50px; }
.remember-check .form-check-label{ font-family: 'Gotham-light'; }
.remember-check .form-check-input:checked{
    background-color: rgba(255, 112, 67, 1); 
    border-color: rgba(255, 112, 67, 1);
}

/* ---------- HEADER - FULLY RESPONSIVE ---------- */
.appie-header-area {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Logo */
.appie-logo-box {
  flex-shrink: 0;
}
.appie-logo-box img {
  max-height: 38px;
  width: auto;
  display: block !important;
}

/* Right button container */
.appie-btn-box {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap !important;
}

/* Profile avatar */
.header-avatar {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border: 2px solid #ff704320;
  transition: border-color 0.2s;
}
.header-avatar:hover {
  border-color: #ff7043;
}

/* Login button */
.header-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1.5px solid #e5e5e5;
  background: #fff;
  color: #333 !important;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s;
  text-decoration: none;
}
.header-login-btn:hover {
  border-color: #ff7043;
  color: #ff7043 !important;
}

/* Get Started button */
.header-signup-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 8px;
  background: #ff7043;
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s;
  text-decoration: none;
}
.header-signup-btn:hover {
  background: #ef6230;
  color: #fff !important;
}

/* Hamburger */
.toggle-btn {
  flex-shrink: 0;
  cursor: pointer;
  margin-left: 4px;
}

/* ====================================
   LANGUAGE SWITCHER
   ==================================== */
.lang-switcher {
  position: relative;
  flex-shrink: 0;
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f5f5f5;
  border: 1.5px solid #e8e8e8;
  border-radius: 20px;
  padding: 5px 10px 5px 8px;
  cursor: pointer;
  line-height: 1;
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.lang-btn:hover {
  background: #ececec;
  border-color: #ccc;
}

.lang-flag {
  font-size: 15px;
  line-height: 1;
}

.lang-code {
  font-size: 12px;
  font-weight: 700;
  color: #444;
  letter-spacing: 0.3px;
}

.lang-arrow {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.lang-arrow.open {
  transform: rotate(180deg);
}

/* Dropdown */
.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
  min-width: 140px;
  z-index: 9999;
  overflow: hidden;
  animation: dropIn 0.15s ease;
}

@keyframes dropIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  transition: background 0.15s;
}
.lang-option:hover {
  background: #f8f8f8;
}
.lang-option.active {
  background: #fff5f2;
  color: #ff7043;
  font-weight: 600;
}
.opt-flag {
  font-size: 18px;
  line-height: 1;
}
.opt-label {
  flex: 1;
}
.opt-check {
  flex-shrink: 0;
}

/* ====================================
   PROFILE DROPDOWN
   ==================================== */
.profile-dropdown{
    width:240px;
    border-radius:12px;
    overflow:hidden;
}
.profile-header{
    padding:14px 16px;
    background:#fff;
    border-bottom: 1px solid #f3f4f6;
}
.profile-dropdown .dropdown-item{
    padding:12px 16px;
    font-size:14px;
    color:#1f2a37;
}
.profile-dropdown .dropdown-item i{
    font-size:16px;
}
.profile-dropdown .dropdown-item:hover{
    background:#f3f4f6;
}
.profile-dropdown .logout{
    background:#fdf2f0;
    color: #e53e3e;
}
.profile-dropdown .logout:hover{
    background:#fde8e5;
}

/* ====================================
   REST OF EXISTING STYLES
   ==================================== */
.verify-card{
    max-width: 560px;
    width:100%;
    background:#fff;
    border-radius:18px;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
}
.verify-card .icon-box{
    width:60px; height:60px;
    background:#ffe9e1;
    border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    font-size:24px;
}
.verify-card .otp-input{
    width:48px; height:56px;
    border-radius:12px;
    border:2px solid #e2e6ea;
    text-align:center; font-size:20px;
    outline:none; transition:0.2s;
}
.verify-card .otp-input:focus{ border-color:#ff7a4f; }
.verify-card .otp-input.active{ border-color:#ff7a4f; }
.verify-card .verify-btn{
    background:#ff7a4f; border:none;
    padding:14px; border-radius:12px;
    font-weight:600; color:#fff;
}
.verify-card .verify-btn:hover{ background:#ff6a3c; }
.verify-card .resend{ color:#ff7a4f; font-weight:500; }

.success-modal .modal-content{
    border-radius:24px; background:#fff;
    box-shadow:0 15px 40px rgba(0,0,0,0.15);
}
.success-icon{
    width:80px; height:80px;
    border-radius:50%;
    background:#2ea44f; color:#fff;
    font-size:36px;
    display:flex; align-items:center; justify-content:center;
}
.back-btn{
    background:#ff7043; border:none;
    padding:14px; border-radius:12px;
    color:#fff; font-weight:600;
}
.back-btn:hover{ background:#ff6230; }
.main-title{ font-weight:700; font-size:42px; color:#0d2240; }
.sub-title{ color:#6b7280; font-size:16px; }
.plan-card{
    background:#fff; border-radius:14px;
    padding:40px 30px; text-align:left;
    box-shadow:0 6px 18px rgba(0,0,0,0.08);
    transition:.3s;
}
.monthly-card{ border:1px solid #e5e5e5; }
.yearly-card{ border:2px solid #ff7043; }
.save-badge{
    position:absolute; top:-14px; left:50%; transform:translateX(-50%);
    background:#ff7043; color:#fff;
    padding:6px 14px; font-size:12px;
    border-radius:20px; font-weight:600;
}
.plan-type{ text-align:center; color:#6b7280; font-weight:600; letter-spacing:1px; }
.price{ text-align:center; font-size:48px; font-weight:700; color:#0d2240; margin:10px 0; }
.price span{ font-size:16px; font-weight:500; color:#6b7280; }
.monthly-small{ text-align:center; color:#6b7280; margin-bottom:20px; }
.plan-list{ list-style:none; padding:0; margin:25px 0; }
.plan-list li{ margin-bottom:14px; position:relative; padding-left:26px; color:#0d2240; }
.plan-list li::before{ content:"✓"; position:absolute; left:0; color:#ff7043; font-weight:700; }
.choose-btn{ background:#eee9e4; padding:14px; border-radius:10px; font-weight:600; border:none; color:#0d2240; }
.choose-btn.active{ background:#ff7043; color:#fff; }
.bottom-text{ font-size:14px; color:#6b7280; }
.bottom-text a{ color:#ff7043; text-decoration:none; font-weight:500; }
.plan-card.active{ border:2px solid #ff7043; box-shadow:0 8px 20px rgba(0,0,0,0.08); }
.plan-card.active .choose-btn{ background:#ff7043; color:#fff; }
.active-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.active-badge{ background:#e8f7ee; color:#1aa36f; font-size:12px; padding:4px 10px; border-radius:20px; font-weight:600; }
.expiry{ font-size:13px; color:#6b7280; font-weight:600; text-align: center; margin-bottom: 12px; }
.purchase-card{ background:#fff; border:1px solid #f1e5db; border-radius:14px; padding:20px; }
.purchase-title{ font-weight:600; color:#2c3442; }
.view-all{ color: #ff7043; text-decoration:none; font-weight:500; }
.purchase-table thead th{ font-size:13px; color:#8a97a6; font-weight:600; border-bottom:1px solid #eef1f4; }
.purchase-table tbody tr{ border-bottom:1px solid #eef1f4; }
.purchase-table tbody tr:last-child{ border-bottom:none; }
.date{ font-weight:600; color:#2c3442; }
.time{ font-size:14px; color:#8a97a6; }
.plan-icon{ width:40px; height:40px; background:#fff3e8; border-radius:10px; display:flex; align-items:center; justify-content:center; color: #ff7043; }
.plan-icon.star{ background:#ffe9d6; }
.amount{ font-weight:600; color:#2c3442; }
.invoice-link{ color: #ff7043; text-decoration:none; font-weight:500; }
.purchase-footer{ padding-top:15px; font-size:14px; color:#8a97a6; }
.nav-btn{ border:1px solid #f1e5db; background:#fff; border-radius:8px; width:38px; height:38px; }
.form-card{ max-width:520px; background:#fff; padding:30px; border-radius:14px; box-shadow:0 6px 20px rgba(0,0,0,0.06); }
.form-card .form-title{ text-align:center; font-weight:600; }
.form-card .form-control{ height:48px; border-radius:10px; background:#f5f6f8; border:1px solid #e5e7eb; }
.form-card .form-control:focus{ box-shadow:none; border-color:#ff6b3d; background:#fff; }
.form-card .profile-img{ position:relative; width:110px; height:110px; margin:auto; }
.form-card .profile-img img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.form-card .edit-btn{ position:absolute; bottom:-8px; left:50%; transform:translateX(-50%); background:#22c55e; border:none; color:#fff; font-size:12px; padding:4px 12px; border-radius:20px; }
.form-card .update-btn{ background:#ff6b3d; color:#fff; border-radius:10px; height:48px; font-weight:500; }

/* ---------- TABLET (max 991px) ---------- */
@media(max-width:991px){
    .left-panel{ text-align:center; padding:35px 20px; }
    .right-panel{ padding:35px 20px; }
    .auth-wrapper .auth-row{ margin: 1px; }
    .appie-btn-box { gap: 6px; }
}

/* ---------- MOBILE (max 767px) ---------- */
@media(max-width:767px){
    .sign-title { font-size: 20px; }
    .auth-wrapper { margin: 60px 14px; margin-top: 130px; }
    .left-panel h2 { font-size: 26px; }
    .social-btn { font-size: 12px; }
    .social-btn img { height: 20px; width: 20px; }
    .right-panel { padding: 24px 12px; }
    .right-panel .form-control { font-size: 14px; padding: 10px 12px; }
    .btn-sign { font-size: 14px; }
    .left-panel { padding: 24px 15px; }
    .right-panel .form-select { font-size: 14px; padding: 10px 12px; }
    .verify-card .verify-btn { padding: 12px; font-size: 14px; }
    .main-title { font-size: 24px; }
    .price { font-size: 26px; }
    .plan-list li { font-size: 14px; }
    .choose-btn { padding: 12px; font-size: 14px; }
    .plan-type { font-size: 14px; }
    .sub-title { font-size: 14px; }

    /* Header mobile */
    .appie-header-area { padding-top: 10px; padding-bottom: 10px; }
    .appie-logo-box img { max-height: 32px; }
    .appie-btn-box { gap: 5px; }

    .lang-btn { padding: 4px 8px 4px 6px; }
    .lang-code { font-size: 11px; }
    .lang-flag { font-size: 14px; }

    .header-login-btn { padding: 6px 10px; font-size: 12px; }
    .header-login-btn i { display: none; }

    .header-signup-btn { padding: 6px 10px; font-size: 12px; }

    .header-avatar { width: 32px; height: 32px; }
}

/* ---------- SMALL MOBILE (max 420px) ---------- */
@media(max-width:420px){
    .appie-logo-box img { max-height: 28px; }
    .appie-btn-box { gap: 4px; }

    .lang-btn { padding: 4px 7px 4px 5px; }
    .lang-code { display: none; } /* show only flag on tiny screens */

    .header-login-btn { padding: 5px 9px; font-size: 11px; }
    .header-signup-btn { padding: 5px 9px; font-size: 11px; }
}

/* ---------- FOOTER APP BUTTONS MOBILE SPACING ---------- */
@media(max-width:767px){
    .footer-widget-info .app-button a:first-child {
        margin-bottom: 30px;
    }
}

/* ---------- VERY SMALL (max 360px) ---------- */
@media(max-width:360px){
    /* Hide Get Started, keep Login */
    .header-signup-btn { display: none !important; }
    .header-login-btn { padding: 6px 12px; font-size: 12px; }
    .header-login-btn i { display: inline; } /* show icon as substitute */
    .header-login-btn .btn-text { display: none; } /* hide text, keep icon */
}