/* ===== Hesabım / Account Page Styles ===== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');

:root{
  --hp-bg:        oklch(0.975 0.004 150);
  --hp-surface:   #ffffff;
  --hp-surface-2: oklch(0.985 0.004 150);
  --hp-ink:       oklch(0.27 0.012 155);
  --hp-ink-soft:  oklch(0.46 0.012 155);
  --hp-ink-faint: oklch(0.60 0.010 155);
  --hp-line:      oklch(0.925 0.006 155);
  --hp-line-soft: oklch(0.955 0.005 155);

  --hp-brand:      oklch(0.52 0.10 158);
  --hp-brand-deep: oklch(0.43 0.09 158);
  --hp-brand-tint: oklch(0.965 0.02 158);
  --hp-brand-line: oklch(0.90 0.04 158);

  --hp-st-ship-fg: oklch(0.50 0.10 245);
  --hp-st-ship-bg: oklch(0.965 0.02 245);
  --hp-st-ship-ln: oklch(0.90 0.04 245);

  --hp-st-recv-fg: oklch(0.55 0.10 75);
  --hp-st-recv-bg: oklch(0.965 0.025 80);
  --hp-st-recv-ln: oklch(0.90 0.05 80);

  --hp-st-deliv-fg: oklch(0.50 0.10 158);
  --hp-st-deliv-bg: oklch(0.965 0.02 158);
  --hp-st-deliv-ln: oklch(0.90 0.04 158);

  --hp-radius: 16px;
  --hp-shadow: 0 1px 2px oklch(0.4 0.02 155 / .05), 0 8px 24px -12px oklch(0.4 0.02 155 / .12);
  --hp-shadow-sm: 0 1px 2px oklch(0.4 0.02 155 / .06);
}

/* ─── Reset inside hp-shell ─── */
.hp-shell *{ box-sizing:border-box; }
.hp-shell a{ text-decoration:none; }

/* ─── Shell ─── */
.profile-page {
    background: #f4f4f4;
    padding: 4rem 0;
}
.hp-shell{
  font-family:"Manrope", system-ui, sans-serif;
  max-width:1160px;
  margin:0 auto;
  padding:32px 28px 72px;
  background:
    radial-gradient(1200px 600px at 100% -10%, oklch(0.96 0.02 158 / .6), transparent 60%),
    var(--hp-bg);
  min-height:60vh;
  color:var(--hp-ink);
  -webkit-font-smoothing:antialiased;
}

/* ─── Modal toggle checkboxes ─── */
.hp-modal-toggle{ position:absolute; width:0; height:0; opacity:0; pointer-events:none; }

/* ─── Top bar ─── */
.hp-topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; margin-bottom:26px;
}
.hp-brand{ display:flex; align-items:center; gap:13px; }
.hp-brand-mark{
  width:44px; height:44px; border-radius:13px;
  background:linear-gradient(150deg, var(--hp-brand), var(--hp-brand-deep));
  display:grid; place-items:center; color:#fff; flex:none;
  box-shadow:0 6px 16px -6px var(--hp-brand);
}
.hp-brand-mark svg{ width:22px; height:22px; }
.hp-brand-name{ font-size:15px; font-weight:800; letter-spacing:-.02em; }
.hp-brand-sub{ font-size:12.5px; color:var(--hp-ink-faint); font-weight:500; margin-top:-1px; }

.hp-top-right{ display:flex; align-items:center; gap:14px; }
.hp-user-chip{ display:flex; align-items:center; gap:11px; padding-right:4px; }
.hp-avatar{
  width:40px; height:40px; border-radius:50%; flex:none;
  background:var(--hp-brand-tint); color:var(--hp-brand-deep);
  display:grid; place-items:center; font-weight:700; font-size:14px;
  border:1px solid var(--hp-brand-line);
}
.hp-user-meta{ text-align:right; line-height:1.25; }
.hp-user-name{ font-size:13.5px; font-weight:700; color:var(--hp-ink); }
.hp-user-mail{ font-size:12px; color:var(--hp-ink-faint); }
.hp-btn-logout{
  display:inline-flex; align-items:center; gap:8px;
  font-family:inherit; font-size:13.5px; font-weight:600; color:var(--hp-ink-soft);
  background:var(--hp-surface); border:1px solid var(--hp-line);
  padding:10px 16px; border-radius:11px; cursor:pointer;
  box-shadow:var(--hp-shadow-sm); transition:.18s ease;
}
.hp-btn-logout svg{ width:16px; height:16px; }
.hp-btn-logout:hover{ color:oklch(0.5 0.13 25); border-color:oklch(0.85 0.06 25); background:oklch(0.985 0.012 25); }

/* ─── Tabs (pure-CSS radio) ─── */
.hp-tab-input{ position:absolute; opacity:0; pointer-events:none; }
.hp-tabbar{
  display:inline-flex; gap:4px; padding:5px;
  background:var(--hp-surface); border:1px solid var(--hp-line);
  border-radius:14px; box-shadow:var(--hp-shadow-sm); margin-bottom:22px;
}
.hp-tab{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-size:14px; font-weight:600; color:var(--hp-ink-soft);
  padding:10px 18px; border-radius:10px; transition:.18s ease; user-select:none;
}
.hp-tab svg{ width:17px; height:17px; }
.hp-tab:hover{ color:var(--hp-ink); background:var(--hp-surface-2); }
#hp-tab-orders:checked ~ .hp-tabbar label[for="hp-tab-orders"],
#hp-tab-user:checked   ~ .hp-tabbar label[for="hp-tab-user"]{
  background:linear-gradient(150deg, var(--hp-brand), var(--hp-brand-deep));
  color:#fff; box-shadow:0 6px 14px -7px var(--hp-brand);
}
.hp-panel{ display:none; }
#hp-tab-orders:checked ~ #hp-panel-orders{ display:block; }
#hp-tab-user:checked   ~ #hp-panel-user{ display:block; }

/* ─── Section heading + stats ─── */
.hp-sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.hp-sec-title{ font-size:22px; font-weight:800; letter-spacing:-.025em; color:var(--hp-ink); }
.hp-sec-desc{ font-size:13.5px; color:var(--hp-ink-faint); margin-top:2px; }
.hp-stats{ display:flex; gap:10px; }
.hp-stat{
  background:var(--hp-surface); border:1px solid var(--hp-line); border-radius:13px;
  padding:11px 16px; box-shadow:var(--hp-shadow-sm); min-width:118px;
}
.hp-stat-k{ font-size:11.5px; font-weight:600; color:var(--hp-ink-faint); text-transform:uppercase; letter-spacing:.05em; }
.hp-stat-v{ font-size:18px; font-weight:800; letter-spacing:-.02em; margin-top:3px; color:var(--hp-ink); }

/* ─── Orders card / table ─── */
.hp-card{
  background:var(--hp-surface); border:1px solid var(--hp-line);
  border-radius:var(--hp-radius); box-shadow:var(--hp-shadow); overflow:hidden;
}
.hp-otable{ width:100%; border-collapse:collapse; }
.hp-otable thead th{
  text-align:left; font-size:11.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--hp-ink-faint);
  padding:15px 22px; background:var(--hp-surface-2); border-bottom:1px solid var(--hp-line);
  white-space:nowrap;
}
.hp-otable thead th.hp-num{ text-align:right; }
.hp-otable tbody td{ padding:20px 22px; border-bottom:1px solid var(--hp-line-soft); vertical-align:top; }
.hp-otable tbody tr:last-child td{ border-bottom:0; }
.hp-otable tbody tr{ transition:background .15s ease; }
.hp-otable tbody tr:hover{ background:var(--hp-brand-tint); }

.hp-order-id{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"JetBrains Mono", monospace; font-size:13.5px; font-weight:600;
  color:var(--hp-brand-deep); background:var(--hp-brand-tint);
  border:1px solid var(--hp-brand-line); padding:7px 12px; border-radius:9px;
  cursor:pointer;
}
.hp-order-id svg{ width:14px; height:14px; opacity:.7; }
.hp-order-id:hover{ background:#fff; border-color:var(--hp-brand); }

.hp-cell-date{ font-size:13.5px; color:var(--hp-ink-soft); font-weight:500; white-space:nowrap; }

.hp-prod{ max-width:430px; }
.hp-prod-line{ display:flex; align-items:baseline; gap:8px; font-size:14px; }
.hp-prod-line + .hp-prod-line{ margin-top:6px; }
.hp-prod-name{ font-weight:600; color:var(--hp-ink); }
.hp-prod-qty{
  flex:none; font-family:"JetBrains Mono", monospace; font-size:11.5px; font-weight:600;
  color:var(--hp-ink-soft); background:var(--hp-surface-2); border:1px solid var(--hp-line);
  padding:1px 7px; border-radius:6px; white-space:nowrap;
}
.hp-note{
  margin-top:11px; font-size:12.5px; line-height:1.45; border-radius:10px;
  padding:9px 12px 9px 13px;
}
.hp-note-label{ font-weight:700; }
.hp-note-user{ background:var(--hp-surface-2); border:1px solid var(--hp-line); color:var(--hp-ink-soft); }
.hp-note-user .hp-note-label{ color:var(--hp-ink); }
.hp-note-admin{ background:var(--hp-brand-tint); border:1px solid var(--hp-brand-line); color:var(--hp-brand-deep); font-style:italic; }
.hp-note-admin .hp-note-label{ color:var(--hp-brand-deep); font-style:normal; }

.hp-cell-price{ text-align:right; font-size:14.5px; font-weight:800; letter-spacing:-.02em; color:var(--hp-ink); white-space:nowrap; }
.hp-cell-price .hp-cur{ font-size:11.5px; font-weight:600; color:var(--hp-ink-faint); margin-left:3px; }

.hp-badge{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:700; padding:6px 12px 6px 10px; border-radius:999px;
  white-space:nowrap; border:1px solid transparent;
}
.hp-dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.hp-ship{ color:var(--hp-st-ship-fg); background:var(--hp-st-ship-bg); border-color:var(--hp-st-ship-ln); }
.hp-ship .hp-dot{ background:var(--hp-st-ship-fg); }
.hp-recv{ color:var(--hp-st-recv-fg); background:var(--hp-st-recv-bg); border-color:var(--hp-st-recv-ln); }
.hp-recv .hp-dot{ background:var(--hp-st-recv-fg); }
.hp-deliv{ color:var(--hp-st-deliv-fg); background:var(--hp-st-deliv-bg); border-color:var(--hp-st-deliv-ln); }
.hp-deliv .hp-dot{ background:var(--hp-st-deliv-fg); }

.hp-pay{ display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--hp-ink-soft); white-space:nowrap; }
.hp-pay svg{ width:17px; height:17px; color:var(--hp-ink-faint); flex:none; }

/* ─── User info panel ─── */
.hp-profile-grid{ display:grid; grid-template-columns:300px 1fr; gap:20px; align-items:start; }
.hp-pcard{ background:var(--hp-surface); border:1px solid var(--hp-line); border-radius:var(--hp-radius); box-shadow:var(--hp-shadow); padding:26px; }
.hp-pcard-head{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--hp-ink-faint); margin-bottom:18px; }
.hp-id-card{ text-align:center; }
.hp-id-avatar{
  width:84px; height:84px; border-radius:24px; margin:6px auto 14px;
  background:linear-gradient(150deg, var(--hp-brand), var(--hp-brand-deep)); color:#fff;
  display:grid; place-items:center; font-size:30px; font-weight:800;
  box-shadow:0 10px 24px -10px var(--hp-brand); font-family:"Manrope", system-ui, sans-serif;
}
.hp-id-name{ font-size:18px; font-weight:800; letter-spacing:-.02em; color:var(--hp-ink); }
.hp-id-mail{ font-size:13px; color:var(--hp-ink-faint); margin-top:2px; }
.hp-id-member{
  display:inline-flex; align-items:center; gap:7px; margin-top:14px;
  font-size:12px; font-weight:600; color:var(--hp-brand-deep);
  background:var(--hp-brand-tint); border:1px solid var(--hp-brand-line);
  padding:6px 13px; border-radius:999px;
}
.hp-field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 22px; }
.hp-field{ display:flex; flex-direction:column; gap:6px; }
.hp-field-full{ grid-column:1 / -1; }
.hp-field label{ font-size:12px; font-weight:700; color:var(--hp-ink-faint); letter-spacing:.02em; }
.hp-val{
  font-size:14px; font-weight:500; color:var(--hp-ink); padding:11px 14px;
  background:var(--hp-surface-2); border:1px solid var(--hp-line); border-radius:11px;
  font-family:inherit; width:100%; outline:none; transition:.15s ease;
}
.hp-val:focus{ border-color:var(--hp-brand); background:var(--hp-surface); box-shadow:0 0 0 3px var(--hp-brand-tint); }
select.hp-val{ cursor:pointer; }
.hp-form-actions{ display:flex; align-items:center; gap:12px; margin-top:22px; flex-wrap:wrap; }
.hp-btn-primary{
  display:inline-flex; align-items:center; gap:8px;
  font-family:inherit; font-size:14px; font-weight:700; color:#fff;
  background:linear-gradient(150deg, var(--hp-brand), var(--hp-brand-deep));
  border:none; padding:12px 22px; border-radius:11px; cursor:pointer;
  box-shadow:0 6px 16px -6px var(--hp-brand); transition:.18s ease;
}
.hp-btn-primary:hover{ opacity:.9; transform:translateY(-1px); }
.hp-btn-outline{
  display:inline-flex; align-items:center; gap:8px;
  font-family:inherit; font-size:13.5px; font-weight:600; color:var(--hp-ink-soft);
  background:var(--hp-surface); border:1px solid var(--hp-line);
  padding:11px 18px; border-radius:11px; cursor:pointer;
  box-shadow:var(--hp-shadow-sm); transition:.18s ease;
}
.hp-btn-outline:hover{ color:var(--hp-ink); border-color:var(--hp-brand); }

/* ─── Order detail modal (pure CSS) ─── */
.hp-detail-modal{ display:none; position:fixed; inset:0; z-index:9999; }
.hp-dm-backdrop{ position:absolute; inset:0; background:oklch(0.22 0.012 155 / .5); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); cursor:pointer; }
.hp-dm-dialog{
  position:relative; width:min(1040px, 94vw); max-height:92vh; margin:4vh auto;
  background:var(--hp-surface); border-radius:20px; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 40px 90px -25px oklch(0.2 0.02 155 / .55);
  animation:hpDmIn .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes hpDmIn{ from{ opacity:0; transform:translateY(14px) scale(.985); } to{ opacity:1; transform:none; } }
.hp-dm-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:19px 26px; background:oklch(0.24 0.012 158); color:#fff; flex:none;
}
.hp-dm-title{ font-size:19px; font-weight:800; letter-spacing:-.01em; }
.hp-dm-close{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  color:oklch(0.85 0.01 158); cursor:pointer; transition:.16s ease;
}
.hp-dm-close svg{ width:20px; height:20px; }
.hp-dm-close:hover{ background:oklch(1 0 0 / .12); color:#fff; }
.hp-dm-body{ padding:26px; overflow:auto; }

.hp-dm-grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:14px; }
.hp-dm-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.hp-dm-cell{ background:var(--hp-surface-2); border:1px solid var(--hp-line); border-radius:14px; overflow:hidden; }
.hp-dm-cell-h{ padding:13px 17px; font-size:13.5px; font-weight:700; color:var(--hp-ink); border-bottom:1px solid var(--hp-line); }
.hp-dm-cell-b{ padding:14px 17px; font-size:14px; color:var(--hp-ink-soft); font-weight:500; }
.hp-mono{ font-family:"JetBrains Mono", monospace; font-weight:600; color:var(--hp-brand-deep); }
.hp-addr{ line-height:1.5; }
.hp-cargo{ display:flex; flex-direction:column; gap:4px; }
.hp-dm-cargo-carrier{ display:inline-flex; align-items:center; gap:9px; font-weight:700; color:var(--hp-ink); }
.hp-dm-cargo-carrier svg{ width:18px; height:18px; color:var(--hp-brand); flex:none; }
.hp-dm-cargo-code{ font-size:13px; color:var(--hp-ink-soft); }
.hp-dm-cargo-code b{ font-family:"JetBrains Mono", monospace; font-weight:600; color:var(--hp-ink); }
.hp-cargo-pending .hp-dm-cargo-carrier{ color:var(--hp-ink-faint); }
.hp-cargo-pending .hp-dm-cargo-carrier svg{ color:var(--hp-ink-faint); }
.hp-cargo-pending .hp-dm-cargo-code{ color:var(--hp-ink-faint); }

.hp-dm-tablewrap{ border:1px solid var(--hp-line); border-radius:14px; overflow:hidden; }
.hp-dm-table{ width:100%; border-collapse:collapse; }
.hp-dm-table th{ text-align:left; font-size:12.5px; font-weight:700; letter-spacing:.02em; padding:14px 17px; background:var(--hp-surface-2); border-bottom:1px solid var(--hp-line); color:var(--hp-ink); }
.hp-dm-table td{ padding:15px 17px; font-size:14px; color:var(--hp-ink-soft); border-bottom:1px solid var(--hp-line-soft); }
.hp-dm-table tbody tr:last-child td{ border-bottom:0; }
.hp-dm-prod{ font-weight:600; color:var(--hp-ink) !important; }
.hp-dm-prod a{ color:var(--hp-ink); }
.hp-dm-prod a:hover{ color:var(--hp-brand); }
.hp-num{ text-align:right !important; white-space:nowrap; font-weight:600; color:var(--hp-ink) !important; }

.hp-dm-totals{ display:flex; flex-direction:column; gap:11px; margin:22px 0 4px auto; width:min(320px, 100%); }
.hp-dm-trow{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; }
.hp-k{ font-size:14px; font-weight:700; color:var(--hp-ink); }
.hp-v{ font-size:14px; color:var(--hp-ink-soft); }
.hp-grand{ border-top:1px solid var(--hp-line); padding-top:13px; margin-top:2px; }
.hp-grand .hp-k, .hp-grand .hp-v{ font-size:18px; font-weight:800; color:var(--hp-ink); letter-spacing:-.02em; }

/* ─── Responsive ─── */
@media (max-width:880px){
  .hp-shell{ padding:22px 16px 56px; }
  .hp-stats{ display:none; }
  .hp-user-meta{ display:none; }
  .hp-profile-grid{ grid-template-columns:1fr; }
  .hp-field-grid{ grid-template-columns:1fr; }
  .hp-card{ border-radius:14px; }
  .hp-otable thead{ display:none; }
  .hp-otable,.hp-otable tbody,.hp-otable tr,.hp-otable td{ display:block; width:100%; }
  .hp-otable tbody tr{ border-bottom:1px solid var(--hp-line); padding:16px 16px 18px; }
  .hp-otable tbody tr:last-child{ border-bottom:0; }
  .hp-otable tbody td{ padding:0; border:0; }
  .hp-otable tbody td + td{ margin-top:12px; }
  .hp-prod{ max-width:none; }
  .hp-cell-price{ text-align:left !important; font-size:17px; }
}

@media (max-width:760px){
  .hp-dm-grid4{ grid-template-columns:1fr 1fr; }
  .hp-dm-grid2{ grid-template-columns:1fr; }
  .hp-dm-body{ padding:18px; }
  .hp-dm-dialog{ width:96vw; max-height:94vh; margin:3vh auto; }
}

/* login page */

.login-page {
    position: relative;
    width: 100%;
    background-position: 100% center;
    height: 100vh;
}

.login-bg {
    background: url("/uploads/images/login-bg.jpg") center center / cover no-repeat transparent;
    position: absolute;
    width: 50%;
    height: 100%;
}


.login-form {
    margin: auto;
    max-width: 570px;
}

.login-content {
    border-radius: 0px;
    padding: 0px;
    background: white;
    position: relative;
    height: 100vh;
}

.return-home {
    color: rgb(0, 123, 255);
    letter-spacing: 1px;
    line-height: 28px;
    position: relative;
    top: 10px;
    text-decoration: none;
}

.return-home i {
    float: left;
    line-height: 28px;
    margin-right: 10px;
}

#google-signin-container > div > div > div {
    width: 100% !important;
    max-width: 100% !important;
}

.login-panel {
    padding: 0px 30px;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transition: 0.5s;
    opacity: 0;
    transform: translateX(-100%);
    display: flex;
    flex-direction: column;
}

.login-panel.active {
    opacity: 1;
    transform: translateX(0px);
}

.login-form .form-group {
    margin-bottom: 1.4rem;
}
.login-form select {
    color: rgb(156, 154, 154) !important;
}

.login-form .form-control::placeholder {
    color: rgb(160, 156, 156);
}

.login-form .form-control:focus {
    border: 1px solid rgb(62, 188, 203);
}

.login-form .custom-checkbox label {
    font-size: 15px;
    font-weight: 500;
    color: rgb(148, 142, 142);
    font-family: Poppins;
    line-height: 24px;
}

.login-form .or {
    display: block;
    text-align: center;
    position: relative;
    text-transform: lowercase;
    margin-bottom: 1.5rem;
}

.login-form .or span {
    background: white;
    padding: 0px 10px;
    z-index: 1;
    position: relative;
}

.login-form .or::after {
    content: "";
    height: 1px;
    width: 100%;
    border-bottom: 1px solid rgb(226, 226, 226);
    position: absolute;
    left: 0px;
    top: 11px;
}

.forgot-password {
    color: rgb(0, 123, 255);
    text-align: center;
    display: block;
    margin: 1.5rem;
    font-size: 14px;
    text-decoration: none;
}

.social-login-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 4px 0px 10px;
}
div#google-signin-container-cart > div > div > div {
    max-width: 100% !important;
    width: 100% !important;
}
.social-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: initial;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s, box-shadow 0.2s;
    text-decoration: none;
}

.social-login-btn:hover {
    opacity: 0.88;
    box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 8px;
}

.google-login-btn {
    background-color: rgb(255, 255, 255);
    color: rgb(60, 64, 67);
    border: 1px solid rgb(218, 220, 224);
}

.facebook-login-btn {
    background-color: rgb(24, 119, 242);
    color: rgb(255, 255, 255);
}

#google-signin-container > div {
    width: 100% !important;
}

#google-signin-container iframe {
    width: 100% !important;
}

.radius-button {
    padding: 0px 16px;
    color: rgb(0, 123, 255);
    border: 1px solid rgb(0, 123, 255);
    border-radius: 36px;
    font-weight: 600;
    margin: 2.5rem auto 0px;
    display: block;
    max-width: 146px;
    text-align: center;
    line-height: 46px;
    text-decoration: none;
}

.radius-button i {
    position: relative;
    top: 1px;
    margin-right: 4px;
}

.radius-button:hover {
    background: rgb(0, 123, 255);
    color: white;
}

.btn-login, .btn-register {
    background: rgb(0, 123, 255);
    color: white;
    border-radius: 4px;
    padding: 12px 20px;
    display: block;
    margin-top: 20px;
    width: 100%;
}

.btn-login:hover, .btn-register:hover {
    background: rgb(16, 104, 197);
    color: white;
}

.login-form h3 {
    font-size: 28px;
    font-weight: 500;
    text-align: center;
    color: black;
    margin-bottom: 2rem;
    font-family: inherit;
}

.login-form p {
    font-size: 14px;
    margin: 20px;
    color: gray;
    line-height: 1.8;
    text-align: center;
}

.register-message p {
    font-size: 11.2px;
}

.gender {
    display: none;
}

@media (max-width: 680px) {
    .login-form {
        padding: 20px 0px;
    }

    .login-form .form-control {
        font-size: 14px;
    }

    .login-form h3 {
        font-size: 20px;
    }

    .user-signup .radius-button {
        margin-top: 5px;
    }

    .btn-register {
        margin-top: 0px;
    }
}

.login-form .form-control {
    border-radius: 36px;
    padding: 0px 24px;
    height: calc(2.8em + 2px + 0.75rem);
    background: transparent;
}

.login-form .form-control:focus {
    border: 1px solid rgb(62, 188, 203);
}

.btn-register {
    border-radius: 36px;
}

.btn-register-2 {
    background: rgb(245, 110, 110);
    color: white;
    border-radius: 36px;
    padding: 12px 20px;
}

.btn-register-2:hover {
    background: rgb(228, 96, 96);
    color: white;
}

#loginBackdrop .modal-content {
    border: 0px;
    border-radius: 0px;
}

#loginBackdrop .close-button {
    position: absolute;
    right: -16px;
    top: -19px;
    border: 0px;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    text-align: center;
    font-size: 19px;
    line-height: 44px;
    background: white !important;
}

#loginBackdrop::before {
    position: fixed;
    content: "";
    background: rgba(0, 0, 0, 0.76);
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

/* login page end */

/* favorite page */

.fav-page {
    padding: 40px 0px 60px;
}

.fav-page .fav-heading {
    font-size: 20px;
    font-weight: 500;
    color: oklch(0.22 0.02 155);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.fav-page .fav-heading i {
    color: oklch(0.69 0.19 13.41);
    font-size: 18px;
}

.fav-page .fav-count {
    font-size: 13px;
    font-weight: 500;
    color: oklch(0.6 0.01 155);
    background: oklch(0.94 0.005 155);
    padding: 3px 10px;
    border-radius: 20px;
}

.fav-card {
    background: rgb(255, 255, 255);
    border: 1px solid oklch(0.92 0.006 155);
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow 0.18s, transform 0.15s;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.fav-card-img {
    position: relative;
    overflow: hidden;
    background: oklch(0.965 0.004 155);
}

.fav-card-img a {
    display: block;
}

.fav-card-img img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.fav-card:hover .fav-card-img img {
    transform: scale(1.04);
}

.fav-card-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: initial;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: oklch(0.52 0.18 15);
    font-size: 13px;
    transition: background 0.15s, color 0.15s;
    z-index: 1;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 4px;
}

.fav-card-remove:hover {
    background: oklch(0.52 0.18 15);
    color: rgb(255, 255, 255);
}

.fav-card-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 0%;
}

.fav-card-name {
    font-size: 14px;
    font-weight: 500;
    color: oklch(0.25 0.02 155);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none !important;
}

.fav-card-name:hover {
    color: oklch(0.69 0.19 13.55);
}

.fav-card-price {
    font-size: 15px;
    font-weight: 700;
    color: oklch(0.69 0.19 13.55);
    margin-top: auto;
}

.fav-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.fav-btn-cart {
    flex: 1 1 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: oklch(0.69 0.19 13.41);
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: initial;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    color: rgb(255, 255, 255) !important;
    text-decoration: none !important;
}

.fav-btn-cart:hover {
    background: oklch(0.63 0.21 16.03);
    color: rgb(255, 255, 255) !important;
}

.fav-btn-del {
    width: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid oklch(0.88 0.01 155);
    border-radius: 10px;
    color: oklch(0.69 0.19 13.55);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.fav-btn-del:hover {
    background: oklch(0.69 0.19 13.55);
    border-color: oklch(0.69 0.19 13.55);
    color: rgb(255, 255, 255);
}

.fav-empty {
    text-align: center;
    padding: 60px 24px;
}

.fav-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: oklch(0.96 0.015 15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: oklch(0.55 0.18 15);
    font-size: 32px;
    margin-bottom: 20px;
}

.fav-empty-title {
    font-size: 18px;
    font-weight: 700;
    color: oklch(0.25 0.02 155);
    margin-bottom: 8px;
}

.fav-empty-sub {
    font-size: 14px;
    color: oklch(0.55 0.02 155);
}
/* favorite page end */