/* ==========================================================================
   Oscar Custom Theme — Purple (#3e03ab) + Sky Blue (#77c4df)
   Place in: static/css/oscar-custom.css
   Load AFTER oscar's default CSS in your base template.
   ========================================================================== */

:root {
  --purple-tint:   #f5f0ff;
  --purple-light:  #c9b8f5;
  --purple-mid:    #7c4fd4;
  --purple:        #3e03ab;
  --purple-dark:   #280070;
  --blue-tint:     #eef8fc;
  --blue-light:    #b8e2f0;
  --blue:          #77c4df;
  --blue-mid:      #4a9db8;
  --blue-dark:     #1f5f78;
  --white:         #ffffff;
  --bg:            #f8f8f8;
  --bg-card:       #ffffff;
  --border:        #e4e4e4;
  --border-strong: #cccccc;
  --text:          #1a1a1a;
  --text-muted:    #555555;
  --text-faint:    #888888;
  --success:       #1a7a4a;
  --success-bg:    #e8f7ef;
  --warning:       #a06000;
  --warning-bg:    #fff8e6;
  --danger:        #b91c1c;
  --danger-bg:     #fef2f2;
  --radius-sm:     4px;
  --radius:        8px;
  --radius-lg:     12px;
  --radius-xl:     16px;
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.08);
  --shadow:        0 2px 8px rgba(62,3,171,0.10);
  --shadow-lg:     0 4px 20px rgba(62,3,171,0.15);
}

body { background-color: var(--blue-tint); color: var(--text); font-size: 16px; line-height: 1.6; }
a { color: var(--purple-mid); text-decoration: none; }
a:hover { color: var(--purple); text-decoration: underline; }

/* --- Navigation --- */
.navbar, #browse-menu, .navbar-default {
  background-color: var(--purple) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(62,3,171,0.25);
}
.navbar .navbar-brand, .navbar-default .navbar-brand {
  color: var(--white) !important; font-weight: 600; font-size: 20px;
}
.navbar-default .navbar-nav > li > a {
  color: rgba(255,255,255,0.80) !important; font-size: 14px; transition: color 0.15s;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li.active > a {
  color: var(--white) !important; border-bottom: 2px solid var(--blue);
}
.navbar .search-form input[type="text"], #search-form input[type="text"] {
  border: none; border-radius: var(--radius) 0 0 var(--radius);
  padding: 7px 14px; background: rgba(255,255,255,0.15); color: var(--white);
}
.navbar .search-form input[type="text"]::placeholder { color: rgba(255,255,255,0.55); }
.navbar .search-form input[type="text"]:focus { background: rgba(255,255,255,0.25); outline: none; }
.navbar .search-form button, #search-form button {
  background: var(--blue); border: none; border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--blue-dark); padding: 7px 14px; cursor: pointer; transition: background 0.15s;
}
.navbar .search-form button:hover { background: var(--blue-mid); color: var(--white); }
#browse-menu .dropdown-menu, .nav-categories .dropdown-menu {
  border: 0.5px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px 0;
}
#browse-menu .dropdown-menu li a, .nav-categories .dropdown-menu li a {
  color: var(--text) !important; padding: 8px 18px; font-size: 14px;
}
#browse-menu .dropdown-menu li a:hover { background: var(--purple-tint); color: var(--purple-dark) !important; }

.navbar-light .navbar-nav .nav-link {
  color: rgb(0, 0, 0);
}

/* --- Buttons --- */
.btn-outline-secondary, .btn-primary, .btn-add-to-basket {
  background-color: var(--purple) !important; border-color: var(--purple) !important;
  color: var(--white) !important; border-radius: var(--radius); font-weight: 500;
  padding: 9px 20px; transition: background 0.15s, transform 0.1s;
}
.btn-primary:hover, .btn-add-to-basket:hover {
  background-color: var(--purple-dark) !important; border-color: var(--purple-dark) !important; transform: translateY(-1px);
}
.btn-primary:active, .btn-add-to-basket:active { transform: translateY(0); }
.btn-secondary, .btn-default {
  background-color: var(--white) !important; border: 1.5px solid var(--purple) !important;
  color: var(--purple) !important; border-radius: var(--radius); font-weight: 500; padding: 8px 20px;
}
.btn-secondary:hover, .btn-default:hover { background-color: var(--purple-tint) !important; }
.btn-info {
  background-color: var(--blue) !important; border-color: var(--blue) !important;
  color: var(--blue-dark) !important; border-radius: var(--radius); font-weight: 500;
}
.btn-info:hover { background-color: var(--blue-mid) !important; color: var(--white) !important; }
.btn-success { background-color: var(--success) !important; border-color: var(--success) !important; color: var(--white) !important; border-radius: var(--radius); }
.btn-danger  { background-color: var(--danger)  !important; border-color: var(--danger)  !important; color: var(--white) !important; border-radius: var(--radius); }

/* --- Product cards --- */
.product-pod, .product-card, article.product_pod {
  background: var(--bg-card); border: 0.5px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  overflow: hidden; transition: box-shadow 0.2s, transform 0.2s;
}
.product-pod:hover, .product-card:hover, article.product_pod:hover {
  box-shadow: var(--shadow-lg); transform: translateY(-3px);
}
.product-pod .price_color, .product_price .price_color, .price {
  color: var(--purple); font-weight: 600; font-size: 17px;
}
.product-pod h3 a, article.product_pod h3 a { color: var(--text); font-weight: 500; }
.product-pod h3 a:hover { color: var(--purple); text-decoration: none; }
.instock.availability  { background: var(--success-bg); color: var(--success); border-radius: var(--radius-sm); padding: 3px 8px; font-size: 12px; font-weight: 500; }
.outofstock.availability { background: var(--danger-bg); color: var(--danger); border-radius: var(--radius-sm); padding: 3px 8px; font-size: 12px; font-weight: 500; }

/* --- Basket --- */
.basket-items table, #basket_formset table { width: 100%; border-collapse: collapse; }
.basket-items table th, #basket_formset table th {
  background: var(--purple-tint); color: var(--purple-dark); font-weight: 500;
  padding: 10px 14px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em;
}
.basket-items table td, #basket_formset table td {
  padding: 12px 14px; border-bottom: 0.5px solid var(--border); vertical-align: middle;
}
#basket_totals, .basket-total {
  background: var(--purple-tint); border: 0.5px solid var(--purple-light);
  border-radius: var(--radius-lg); padding: 18px 22px;
}
#basket_totals .total, .basket-total .total { font-size: 20px; font-weight: 600; color: var(--purple); }

/* --- Checkout --- */
.checkout-progress-bar { list-style: none; padding: 0; display: flex; gap: 4px; margin-bottom: 28px; }
.checkout-progress-bar li a {
  display: block; padding: 8px 16px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500; color: var(--text-muted);
  background: var(--white); border: 0.5px solid var(--border);
}
.checkout-progress-bar li.active a, .checkout-progress-bar li.current a {
  background: var(--purple); color: var(--white); border-color: var(--purple);
}
.checkout-progress-bar li.completed a {
  background: var(--purple-tint); color: var(--purple-dark); border-color: var(--purple-light);
}
.checkout-step {
  background: var(--bg-card); border: 0.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px 28px; margin-bottom: 20px; box-shadow: var(--shadow-sm);
}
.checkout-step h2, .checkout-step h3 {
  font-size: 17px; font-weight: 600; color: var(--purple-dark);
  margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1.5px solid var(--purple-tint);
}

/* --- Forms --- */
.form-control, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], select, textarea {
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 8px 12px; color: var(--text); background: var(--white);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus, input[type="text"]:focus, input[type="email"]:focus,
input[type="password"]:focus, textarea:focus {
  border-color: var(--purple-mid); box-shadow: 0 0 0 3px rgba(62,3,171,0.12); outline: none;
}
label { font-size: 13px; font-weight: 500; color: var(--text-muted); margin-bottom: 5px; display: block; }
.error-block { color: var(--danger); font-size: 12px; margin-top: 4px; }
.has-error .form-control { border-color: var(--danger) !important; }

/* --- Alerts --- */
.alert { border-radius: var(--radius); border: none; padding: 12px 16px; font-size: 14px; }
.alert-success { background: var(--success-bg); color: var(--success); border-left: 3px solid var(--success); }
.alert-info    { background: var(--blue-tint);   color: var(--blue-dark); border-left: 3px solid var(--blue); }
.alert-warning { background: var(--warning-bg);  color: var(--warning);   border-left: 3px solid #f59e0b; }
.alert-danger, .alert-error { background: var(--danger-bg); color: var(--danger); border-left: 3px solid var(--danger); }

/* --- Breadcrumbs --- */
.breadcrumb { background: var(--blue-tint); padding: 16px; margin-bottom: 16px; font-size: 18px; }
.breadcrumb li a { color: var(--purple-mid); }
.breadcrumb li.active { color: var(--text-faint); }
.breadcrumb > li + li::before { color: var(--border-strong); }

/* --- Pagination --- */
.pagination > li > a, .pagination > li > span {
  color: var(--purple); border: 0.5px solid var(--border);
  border-radius: var(--radius-sm) !important; margin: 0 2px; transition: background 0.15s;
}
.pagination > li > a:hover { background: var(--purple-tint); border-color: var(--purple-light); color: var(--purple-dark); }
.pagination > .active > a, .pagination > .active > span {
  background: var(--purple) !important; border-color: var(--purple) !important; color: var(--white) !important;
}

/* --- Account / badges / order tables --- */
.account-nav .list-group-item, .side-nav .list-group-item {
  border: none; border-radius: var(--radius); color: var(--text);
  font-size: 14px; padding: 10px 16px; margin-bottom: 2px; transition: background 0.15s;
}
.account-nav .list-group-item:hover { background: var(--purple-tint); color: var(--purple-dark); }
.account-nav .list-group-item.active { background: var(--purple) !important; color: var(--white) !important; border: none !important; }
.badge, .label { border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; padding: 3px 8px; }
.label-success, .badge-success { background: var(--success-bg); color: var(--success); }
.label-warning, .badge-warning { background: var(--warning-bg); color: var(--warning); }
.label-danger,  .badge-danger  { background: var(--danger-bg);  color: var(--danger); }
.label-info,    .badge-info    { background: var(--blue-tint);  color: var(--blue-dark); }
.label-default, .badge-default { background: var(--purple-tint); color: var(--purple-dark); }
.table-orders th, .order-list table th {
  background: var(--purple-tint); color: var(--purple-dark);
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 10px 14px;
}
.table-orders tr:hover td, .order-list table tr:hover td { background: var(--blue-tint); }

/* --- Panels --- */
.panel { border-radius: var(--radius-lg); border: 0.5px solid var(--border); box-shadow: var(--shadow-sm); }
.panel-body { padding: 20px 22px; }
.panel-primary > .panel-heading {
  background: var(--purple); border-color: var(--purple); color: var(--white);
  border-radius: var(--radius) var(--radius) 0 0;
}
.panel-default > .panel-heading {
  background: var(--purple-tint); color: var(--purple-dark);
  border-bottom: 0.5px solid var(--purple-light); border-radius: var(--radius) var(--radius) 0 0;
}

/* --- Footer --- */
footer, .footer {
  background: var(--purple-dark); color: rgba(255,255,255,0.75);
  font-size: 13px; padding: 36px 0 20px; margin-top: 60px;
  background-color: var(--purple-mid);
}
footer a, .footer a { color: var(--blue-light); }
footer a:hover, .footer a:hover { color: var(--white); text-decoration: underline; }
footer h4, .footer h4 { color: var(--white); font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.footer-bottom {
  border-top: 0.5px solid rgba(255,255,255,0.12); margin-top: 24px;
  padding-top: 14px; color: rgba(255,255,255,0.4); font-size: 12px;
}

/* --- Hero / info banners --- */
.hero-banner, .promo-banner {
  background: var(--purple); color: var(--white);
  border-radius: var(--radius-xl); padding: 36px 40px; margin-bottom: 32px;
}
.hero-banner h1 { font-size: 30px; font-weight: 700; margin-bottom: 10px; color: var(--white); }
.hero-banner p  { color: rgba(255,255,255,0.80); margin-bottom: 20px; }
.hero-banner .btn-cta {
  background: var(--blue); color: var(--blue-dark); border: none;
  border-radius: var(--radius); padding: 10px 24px; font-weight: 600; font-size: 15px; cursor: pointer;
}
.hero-banner .btn-cta:hover { background: var(--blue-mid); color: var(--white); }
.info-banner {
  background: var(--blue-tint); border-left: 3px solid var(--blue);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 12px 18px;
  color: var(--blue-dark); font-size: 14px; margin-bottom: 16px;
}

/* --- Utilities --- */
.text-primary { color: var(--purple) !important; }
.text-info    { color: var(--blue-dark) !important; }
.text-muted   { color: var(--text-faint) !important; }
.bg-primary   { background: var(--purple) !important; color: var(--white) !important; }
.bg-info      { background: var(--blue-tint) !important; color: var(--blue-dark) !important; }
.star-rating .glyphicon-star { color: var(--blue-mid); }
.quantity input[type="number"] {
  width: 64px; text-align: center; border-radius: var(--radius);
  border: 1px solid var(--border-strong); padding: 6px 8px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .navbar-default .navbar-collapse { background: var(--purple-dark); border-top: 0.5px solid rgba(255,255,255,0.1); }
  .navbar-default .navbar-nav > li > a { padding: 10px 16px; }
  .hero-banner { padding: 24px 20px; }
  .hero-banner h1 { font-size: 22px; }
  .checkout-step { padding: 18px 16px; }
  .checkout-progress-bar { flex-wrap: wrap; }
}

.navbar-light {
  background-color: var(--purple-mid) !important;
}