/* Regat Play Hub — ecommerce (/shop*) look & feel
   Targets standard website_sale + employee gift-selection UI on Regat.
*/

:root {
  --regat-red: #ed1c24;
  --regat-red-dark: #c41219;
  --regat-blue: #0057c8;
  --regat-yellow: #ffd100;
  --regat-green: #00a651;
  --regat-navy: #1f2d3d;
  --regat-ink: #1a1a1a;
  --regat-muted: #5b6470;
  --regat-soft: #f7f8fb;
  --regat-card: #ffffff;
  --regat-radius: 16px;
  --regat-shadow: 0 12px 36px rgba(31, 45, 61, 0.12);
  --regat-font: "Nunito", "Segoe UI", sans-serif;
  --regat-display: "Fredoka", "Nunito", sans-serif;
}

/* Activate on shop routes via JS body class */
body.regat-shop-page,
body:has(.oe_website_sale),
body:has(form[action="/employee/authenticate"]),
body:has(.cart_table_cls),
body:has(#cart_products),
body:has(.emp_child_id) {
  font-family: var(--regat-font);
  color: var(--regat-ink);
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 209, 0, 0.14), transparent 26%),
    radial-gradient(circle at 92% 8%, rgba(0, 87, 200, 0.10), transparent 28%),
    #fafbff;
}

/* ---------- Header / nav polish on shop ---------- */
body.regat-shop-page header .navbar,
body.regat-shop-page #wrapwrap > header {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid rgba(31, 45, 61, 0.06);
  box-shadow: 0 4px 18px rgba(31, 45, 61, 0.05);
}

body.regat-shop-page .navbar-nav > li > a {
  font-weight: 700;
  color: var(--regat-navy) !important;
  border-radius: 999px;
  padding: 8px 12px !important;
}

body.regat-shop-page .navbar-nav > li.active > a,
body.regat-shop-page a[href="/shop"] {
  background: var(--regat-yellow) !important;
  color: var(--regat-navy) !important;
}

body.regat-shop-page a[href="/ClearEmpSession"].btn-primary,
body.regat-shop-page .btn[href="/ClearEmpSession"] {
  background: var(--regat-blue) !important;
  border-color: var(--regat-blue) !important;
  border-radius: 12px !important;
  font-weight: 800;
}

/* ---------- Wizard Autenticar / Confirmación ---------- */
.wizard {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.wizard > li {
  font-family: var(--regat-display);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 16px;
  border-radius: 12px 12px 0 0;
  background: #eef1f6;
  color: var(--regat-muted) !important;
  border-bottom: 3px solid transparent;
}

.wizard > li.text-primary,
.wizard > li#step20.text-primary,
.wizard > li#step10.text-primary {
  background: #fff;
  color: var(--regat-blue) !important;
  border-bottom-color: var(--regat-blue);
}

.wizard .chevron { display: none; }

/* ---------- RUT auth form ---------- */
.center-form.border-box,
form[action="/employee/authenticate"] {
  background: #fff;
  border-radius: var(--regat-radius) !important;
  box-shadow: var(--regat-shadow);
  border: 1px solid rgba(31, 45, 61, 0.06) !important;
  padding: 36px 32px 28px !important;
  margin-top: 28px;
}

form[action="/employee/authenticate"] .control-label,
form[action="/employee/authenticate"] label[for="rut"] {
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--regat-navy);
  font-size: 13px;
}

form[action="/employee/authenticate"] input[name="rut"],
form[action="/employee/authenticate"] .o_website_form_input {
  border: 2px solid #d9dee8 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  height: auto !important;
  font-size: 18px !important;
  box-shadow: none !important;
}

form[action="/employee/authenticate"] input[name="rut"]:focus {
  border-color: var(--regat-blue) !important;
}

form[action="/employee/authenticate"] .btn-primary,
.authenticate_emp {
  background: var(--regat-blue) !important;
  border-color: var(--regat-blue) !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  padding: 12px 22px !important;
  width: auto !important;
  min-width: 160px;
}

form[action="/employee/authenticate"] .btn-default,
form[action="/employee/authenticate"] a.btn-default {
  border-radius: 12px !important;
  font-weight: 700;
  background: #eef1f6 !important;
  border-color: #eef1f6 !important;
  color: var(--regat-navy) !important;
}

/* ---------- Shop layout / filters (keep Categorías, Edad, Precio) ---------- */
.oe_website_sale {
  padding-top: 12px;
  padding-bottom: 40px;
}

.flt_heading {
  background: var(--regat-blue) !important;
  color: #fff !important;
  border-radius: 12px 12px 0 0;
  padding: 12px 14px !important;
  font-family: var(--regat-display);
  font-weight: 600;
  font-size: 16px;
}

.p_filter_group {
  margin-bottom: 10px !important;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(31, 45, 61, 0.06);
}

.p_filter_group .panel {
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.p_filter_header {
  background: #fff !important;
  border-bottom: 1px solid #eef1f6 !important;
  cursor: pointer;
}

.p_filter_header .panel-title {
  font-family: var(--regat-display);
  color: var(--regat-navy);
}

.p_filter_body {
  background: #fff;
}

.p_filter_body .fltr_box,
.p_filter_body label {
  font-weight: 600;
  color: var(--regat-muted);
  padding: 6px 0;
}

.p_filter_body input[type="checkbox"] {
  accent-color: var(--regat-blue);
}

/* Category nav list (classic website_sale sidebar) */
.oe_website_sale .nav-pills > li > a,
#products_grid_before .nav-pills > li > a {
  border-radius: 10px;
  font-weight: 700;
  color: var(--regat-navy);
}

.oe_website_sale .nav-pills > li.active > a,
#products_grid_before .nav-pills > li.active > a {
  background: var(--regat-blue) !important;
}

#products_grid_before,
.oe_website_sale .products_categories {
  background: #fff;
  border-radius: var(--regat-radius);
  box-shadow: var(--regat-shadow);
  padding: 12px;
  border: 1px solid rgba(31, 45, 61, 0.06);
}

/* Search / pagination toolbar */
.oe_website_sale form.o_wsale_products_searchbar_form input,
.oe_website_sale input[name="search"],
.oe_website_sale .search-query {
  border: 2px solid #d9dee8 !important;
  border-radius: 12px !important;
  height: 42px !important;
  box-shadow: none !important;
}

.oe_website_sale .pagination > li > a,
.oe_website_sale .pagination > li > span {
  border-radius: 10px !important;
  margin: 0 2px;
  border: 0 !important;
  color: var(--regat-navy);
  font-weight: 700;
}

.oe_website_sale .pagination > .active > a,
.oe_website_sale .pagination > .active > span {
  background: var(--regat-blue) !important;
  color: #fff !important;
}

/* ---------- Product cards (keep Odoo absolute layout, make images BIGGER) ---------- */
/* IMPORTANT: on Regat, #products_grid often has NO col-md-* class, so target cells directly */
#products_grid .oe-height-2,
#products_grid.col-md-12 .oe-height-2,
#products_grid.col-md-9 .oe-height-2,
td.oe_product.oe-height-2,
.oe_product.oe_grid.oe-height-2 {
  height: 340px !important;
  min-height: 340px !important;
}
#products_grid .oe-height-4,
#products_grid.col-md-12 .oe-height-4,
#products_grid.col-md-9 .oe-height-4,
td.oe_product.oe-height-4 {
  height: 460px !important;
  min-height: 460px !important;
}

.oe_product,
td.oe_product {
  padding: 10px !important;
  vertical-align: top;
}

.oe_product .oe_product_cart,
.oe_product_cart {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  background: #fff !important;
  border-radius: var(--regat-radius) !important;
  box-shadow: var(--regat-shadow);
  border: 2px solid transparent;
  overflow: hidden;
  padding: 0 !important; /* critical: do not break absolute image layout */
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.oe_product_cart:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 209, 0, 0.85);
  box-shadow: 0 16px 40px rgba(31, 45, 61, 0.14);
}

/* Restore / enlarge image area — fills most of the card */
.oe_product .oe_product_image,
.oe_product_image {
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  top: 12px !important;
  bottom: 78px !important;
  text-align: center !important;
  border-radius: 12px;
  overflow: hidden;
  background: var(--regat-soft);
  margin: 0 !important;
}

.oe_product .oe_product_image img,
.oe_product_image img,
.oe_product_image .img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  margin: auto !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  z-index: 4;
  object-fit: contain !important;
}

.oe_product section,
.oe_product_cart > form > div > section,
.oe_product_cart section {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  min-height: 72px !important;
  padding: 8px 12px 10px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-top: 1px solid #eef1f6 !important;
  z-index: 5;
  overflow: hidden;
}

.oe_product_cart section h5,
.oe_product_cart section h5 a,
.oe_product section h5 a {
  font-family: var(--regat-display);
  font-size: 14px !important;
  color: var(--regat-ink) !important;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.oe_product_cart .product_price .btn,
.oe_product_cart a.a-submit {
  background: var(--regat-blue) !important;
  border-color: var(--regat-blue) !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 6px 10px !important;
}

.oe_product_cart a.o_add_wishlist,
.oe_product_cart a.o_add_compare {
  border-radius: 10px !important;
  border: 1px solid #d9dee8 !important;
  background: #fff !important;
}

.oe_product_cart > strong,
.oe_product_cart strong[style*="grey"] {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 6;
  background: rgba(255, 255, 255, 0.9);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px !important;
  color: var(--regat-muted) !important;
  font-weight: 700;
  margin: 0 !important;
}

.ribbon.btn-danger {
  background: var(--regat-red) !important;
  border: 0 !important;
}

/* ---------- Product detail ---------- */
.oe_website_sale .js_sale,
#product_detail {
  background: #fff;
  border-radius: var(--regat-radius);
  box-shadow: var(--regat-shadow);
  padding: 24px;
  border: 1px solid rgba(31, 45, 61, 0.06);
}

#product_detail h1,
.oe_website_sale h1[itemprop="name"] {
  font-family: var(--regat-display);
  color: var(--regat-ink);
}

#add_to_cart,
a#add_to_cart,
.oe_website_sale a.a-submit.btn-primary,
.oe_website_sale .btn-primary.js_check_product {
  background: var(--regat-yellow) !important;
  border-color: var(--regat-yellow) !important;
  color: var(--regat-navy) !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  padding: 12px 22px !important;
  box-shadow: 0 4px 0 rgba(196, 18, 25, 0.15);
}

.regat-cart-hint {
  margin: -6px 0 18px;
  font-size: 14px;
  color: var(--regat-muted);
}
.oe_cart,
.oe_website_sale .oe_cart {
  background: #fff;
  border-radius: var(--regat-radius);
  box-shadow: var(--regat-shadow);
  padding: 24px 28px 18px;
  border: 1px solid rgba(31, 45, 61, 0.06);
}

.oe_cart h1,
.oe_cart h2 {
  font-family: var(--regat-display);
  font-size: 28px;
  margin-bottom: 18px;
}

#cart_products,
table.cart_table_cls,
table.js_cart_lines {
  border: 0 !important;
  background: transparent;
}

#cart_products thead th,
.cart_table_cls thead th {
  border: 0 !important;
  background: var(--regat-soft) !important;
  color: var(--regat-navy);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 14px 12px !important;
}

#cart_products thead th.td-child,
.cart_table_cls thead th.td-child {
  color: var(--regat-blue);
}

#cart_products tbody td,
.cart_table_cls tbody td {
  border-top: 1px solid #eef1f6 !important;
  vertical-align: middle !important;
  padding: 16px 12px !important;
  background: #fff !important;
}

#cart_products .td-product_name a,
.cart_table_cls .td-product_name a {
  color: var(--regat-ink) !important;
  font-family: var(--regat-display);
  font-size: 16px;
}

#cart_products .js_delete_product,
.cart_table_cls .js_delete_product {
  color: var(--regat-red) !important;
  font-weight: 700;
}

/* Critical: child select from employee dependents */
select.emp_child_id,
#child_id,
td.td-children select {
  border: 2px solid #d9dee8 !important;
  border-radius: 12px !important;
  height: 44px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--regat-navy) !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230057c8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center !important;
  padding-right: 32px !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
}

select.emp_child_id:focus,
#child_id:focus {
  border-color: var(--regat-yellow) !important;
  box-shadow: 0 0 0 4px rgba(255, 209, 0, 0.35) !important;
}

td.td-children::before {
  content: "Elige el hijo";
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--regat-muted);
  margin-bottom: 6px;
}

/* Cart actions */
.oe_cart a.btn-default,
.oe_website_sale a.btn-default[href="/shop"] {
  border-radius: 12px !important;
  background: #eef1f6 !important;
  border-color: #eef1f6 !important;
  color: var(--regat-navy) !important;
  font-weight: 700 !important;
  padding: 12px 18px !important;
}

a.hideShowEmpBtn,
a.hideShowEmpBtn.btn-primary,
.oe_cart a.btn-primary[href="/shop/CreatePurchaseOrder"] {
  background: var(--regat-red) !important;
  border-color: var(--regat-red) !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  padding: 12px 22px !important;
  display: inline-block !important;
}

a.hideShowEmpBtn:hover {
  background: var(--regat-red-dark) !important;
}

/* Modals (already bought for child, auth errors) */
#AJAXChildGiftErrorModal .modal-content,
#AJAXErrorModal .modal-content {
  border-radius: 16px;
  border: 0;
  box-shadow: var(--regat-shadow);
}

#AJAXChildGiftErrorModal .modal-title,
#AJAXErrorModal .modal-title {
  font-family: var(--regat-display);
}

/* ---------- Thank you page ---------- */
body.regat-shop-page #wrap:has(h1),
.oe_structure:has(h1) {
  /* soft fallback; thank you is often plain text */
}

body.regat-shop-page main #wrap > div,
body.regat-shop-page #wrap .container {
  /* keep readable */
}

/* Center thank-you message when present */
body.regat-shop-page #wrap:not(:has(.oe_website_sale)):not(:has(form[action="/employee/authenticate"])) .container {
  max-width: 720px;
}

body.regat-shop-page #wrap p,
body.regat-shop-page #wrap h1,
body.regat-shop-page #wrap h2 {
  /* thank you pages */
}

body.regat-shop-page #wrap:not(:has(.oe_product)):not(:has(.oe_cart)):not(:has(form[action="/employee/authenticate"])) {
  min-height: 40vh;
}

body.regat-shop-page #wrap:not(:has(.oe_product)):not(:has(.oe_cart)):not(:has(form[action="/employee/authenticate"])) .container {
  background: #fff;
  border-radius: var(--regat-radius);
  box-shadow: var(--regat-shadow);
  padding: 48px 36px;
  margin-top: 40px;
  text-align: center;
  font-family: var(--regat-display);
  font-size: 28px;
  color: var(--regat-navy);
}

/* ---------- Footer soften on shop ---------- */
body.regat-shop-page footer,
body.regat-shop-page #footer {
  margin-top: 40px;
}

@media (max-width: 767px) {
  .oe_cart,
  .center-form.border-box,
  form[action="/employee/authenticate"] {
    padding: 20px 16px !important;
  }

  td.td-children::before {
    text-align: left;
  }
}