/* Variable */
:root {
  --primary: #9d6646;
  --secondary: #fcf8f5;
  --white: #fff;
  --black: #000;
  --grey100: rgb(100, 100, 100);
  --grey220: rgb(220, 220, 220);
  --grey250: rgb(250, 250, 250);
}

/* Custom Font */
@font-face {
  font-family: "Dana";
  src:
    url("./assets/fonts/dana-fanum-regular.eot"),
    url("./assets/fonts/Dana-FaNum-Regular.ttf"),
    url("./assets/fonts/dana-fanum-regular.woff"),
    url("./assets/fonts/dana-fanum-regular.woff2");
}

/* Preset */
* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font-family: Dana;
}

/* Body */
body {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Usual Text */
.psize {
  font-size: 16px;
  line-height: 30px;
}

/* Title */
.tsize {
  font-size: 20px;
  font-weight: bold;
}

/* Container */
.container {
  max-width: 1340px;
  padding: 0 20px;
  margin: auto;
}

@media (max-width: 992px) {
  .psize {
    font-size: 14px;
    line-height: 25px;
  }

  .tsize {
    font-size: 18px;
  }
}

/* Reset a tag */
.a-unset {
  text-decoration: none;
  color: unset;
}

/* Breadcrumb */
.breadcrumb-layout {
  margin: 30px 0;
  background-color: var(--secondary);
  padding: 15px 0;
  color: var(--primary);
  border: 1px solid var(--grey220);
}

.breadcrumb-links {
  max-width: 1340px;
  padding: 0 20px;
  margin: auto;
  font-size: 14px;
  text-align: right;
}

.breadcrumb-links a,
.breadcrumb-links span {
  color: var(--primary);
  transition: all 0.5s ease;
}

@media (max-width: 992px) {
  .breadcrumb-links {
    font-size: 10px;
  }
}

/* Title Part */
.Title-part {
  display: flex;
  gap: 5px;
  margin: 30px 0;
  justify-content: center;
}

.Title-part i {
  font-size: 25px;
  color: var(--primary);
}

@media (max-width: 992px) {
  .Title-part i {
    font-size: 22px;
  }
}

/* Section Title */
.section-title {
  text-align: center;
}

.section-title i {
  color: var(--primary);
}

/* Product Swiper */
.product-swiper,
.special-swiper {
  width: 100%;
}


/* Consistent form feedback — aligned with the Mark Perfume theme */
.form-feedback {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 15px;
  margin: 12px 0 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.9;
  text-align: right;
  overflow-wrap: anywhere;
  animation: feedback-appear .22s ease-out;
}
.form-feedback i {
  flex: 0 0 auto;
  font-size: 19px;
  line-height: 1.6;
}
.form-feedback--error {
  color: #9b3434;
  background: #fff4f3;
  border-color: #f2d2cf;
}
.form-feedback--success {
  color: #276749;
  background: #effaf3;
  border-color: #ccebd7;
}
.form-feedback--info {
  color: #76591e;
  background: #fff9e9;
  border-color: #f1e2b8;
}
.form-field-error {
  display: block;
  margin-top: 7px;
  color: #b53b3b;
  font-size: 12px;
  line-height: 1.8;
}
.form-control-invalid {
  border-color: #cf5b5b !important;
  box-shadow: 0 0 0 3px rgb(207 91 91 / 10%);
}
@keyframes feedback-appear {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .form-feedback { animation: none; }
}


/* Keep SweetAlert dialogs consistent with the site's perfume-store design */
.swal2-popup {
  border: 1px solid var(--grey220, #e5e5e5) !important;
  border-radius: 18px !important;
  padding: 1.5rem !important;
  font-family: inherit !important;
  direction: rtl;
}
.swal2-title {
  color: var(--primary, #292522) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
}
.swal2-html-container {
  color: #666 !important;
  font-size: .92rem !important;
  line-height: 1.9 !important;
}
.swal2-actions button {
  border-radius: 9px !important;
  font-family: inherit !important;
  font-size: .9rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.swal2-confirm {
  background: var(--primary, #292522) !important;
}
.swal2-cancel {
  background: #f2f0ed !important;
  color: #39332f !important;
}


/* Refined feedback cards: warm tones from the Mark Perfume palette */
.form-feedback {
  position: relative;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  margin: 14px 0 20px;
  border-radius: 10px;
  border-width: 1px;
  box-shadow: 0 5px 16px rgb(65 42 28 / 4%);
  font-size: 13px;
  line-height: 1.95;
}
.form-feedback::before {
  content: "";
  position: absolute;
  inset-block: 9px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 4px;
  background: currentColor;
  opacity: .65;
}
.form-feedback i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
}
.form-feedback--error {
  color: #8e4038;
  background: linear-gradient(110deg, #fff9f7, #fff1ee);
  border-color: #efd6d0;
}
.form-feedback--error i {
  color: #a64f45;
  background: #f8e2dd;
}
.form-feedback--success {
  color: #35694b;
  background: linear-gradient(110deg, #f8fcf8, #edf7ef);
  border-color: #d4e8d8;
}
.form-feedback--success i {
  color: #397750;
  background: #dcefe0;
}
.form-feedback--info {
  color: #80632e;
  background: linear-gradient(110deg, #fffdf7, #fbf4e5);
  border-color: #eee1bf;
}
.form-feedback--info i {
  color: #8c6b2d;
  background: #f4e9cb;
}
.form-field-error {
  padding-inline: 2px;
  color: #9d4b41;
}
.form-control-invalid {
  border-color: #b66c60 !important;
  box-shadow: 0 0 0 3px rgb(182 108 96 / 12%) !important;
}
.swal2-popup {
  box-shadow: 0 18px 60px rgb(55 35 22 / 16%) !important;
}
.swal2-icon {
  margin-top: 1rem !important;
}
.swal2-confirm {
  background: var(--primary, #9d6646) !important;
  transition: filter .18s ease, transform .18s ease !important;
}
.swal2-confirm:hover {
  filter: brightness(.94) !important;
  transform: translateY(-1px);
}
@media (max-width: 480px) {
  .form-feedback {
    gap: 9px;
    padding: 11px 12px;
    font-size: 12px;
  }
  .form-feedback i {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }
}