@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Felipa&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Quintessential&display=swap");

body {
     font-family: "Quintessential", serif;
     margin: 0;
     padding: 0;
}

/* ── User avatar icon in navbar ── */
.user-avatar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.45);
    color: #fff;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.user-avatar-icon:hover,
.nav-link:hover .user-avatar-icon,
.nav-link.show .user-avatar-icon {
    border-color: #fff;
    background-color: rgba(255, 255, 255, 0.12);
}
/* Remove the Bootstrap dropdown caret from the icon toggle */
.nav-link.dropdown-toggle.p-0::after {
    display: none;
}

button {
     background-color: black;
     border: none;
     border-radius: 8px;
     color: white;
     cursor: pointer;
     outline: none;
     padding: 16px;
     font-family: Arial, sans-serif;
     font-size: 16px;
}

input, textarea {
     border: 2px solid black;
     border-radius: 8px;
     font-family: Arial, sans-serif;
     font-size: 16px;
     padding: 8px;
}

a {
     text-decoration: none;
     color: black;
     cursor: pointer;
}


#page-wrap {
     background-color: #EEE;
     display: flex;
     flex-direction: column;
     min-height: 100vh;
     padding: 0;
     width: 100vw;
}

#max-width-column {
     background-color: white;
     margin: 0 auto;
     max-width: 700px;
     min-height: 100vh;
     padding: 16px;
     position: relative;
}

#top-bar {
     border-bottom: 2px solid black;
}

#app-heading {
     margin-top: 0;
}

#my-listings-button {
     position: absolute;
     top: 16px;
     right: 16px;
}

.content-box {
     background-color: #EEE;
     border-radius: 8px;
     padding: 16px;
     position: relative;
     margin-bottom: 16px;
}

.buttons-container {
     position: absolute;
     right: 0px;
     bottom: 0px;
     padding: 16px;
}

     .buttons-container > button {
          margin-left: 8px;
     }
/* You can add global styles to this file, and also import other style files */


.felipa {
     font-family: "Felipa", sans-serif;
}

.quicksand {
     font-family: "Quicksand", sans-serif;
}

.quentessential {
     font-family: "Quentessential", sans-serif;
}

#services {
     background-color: #212529;
     color: white;
     font-size: 20px;
}

.section-slogan {
     font-family: "Quicksand";
}

.card {
     margin-left: auto;
     margin-right: auto;
     max-width: 90%;
     background-color: #687480;
     color: white;
     border-radius: 1rem !important;
     border-width: 0;
}

.card-body {
     text-align: center;
     font-family: "Quicksand";
     font-size: 18px;
}

html {
  font-size: 14px;
  font-family: "Quintessential", sans-serif;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}


.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.background
{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 80vh;
    width: 100vw;
}

.navbar-brand {
    font-family: "Quintessential", sans-serif;
    font-size: 24px !important;
}
.navbar-nav {
     --bs-nav-link-padding-x: 0;
     --bs-nav-link-padding-y: 0.5rem;
     --bs-nav-link-color: var(--bs-navbar-color);
     --bs-nav-link-hover-color: var(--bs-navbar-hover-color);
     --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
     display: flex;
     flex-direction: column;
     padding-left: 0px;
     margin-bottom: 0px;
     list-style: none;
}

.navbar-collapse {
     flex-grow: 1;
     flex-basis: 100%;
     align-items: center;
}

.content-wrap {
    flex: 1;
}
.nav-item {
     font-size: 24px;
     color: white;
}
.nav-link {
     display: block;
     font-size: var(--bs-nav-link-font-size);
     font-weight: var(--bs-nav-link-font-weight);
     color: var(--bs-nav-link-color);
     padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
     text-decoration: none;
     background: 0px 0px;
     border-width: 0px;
     border-style: none;
     border-color: currentcolor;
     border-image: initial;
     transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl
{
     --bs-gutter-x: 1.5rem;
     --bs-gutter-y: 0;
     width: 100%;
     padding-right: calc(var(--bs-gutter-x) * .5);
     padding-left: calc(var(--bs-gutter-x) * .5);
     margin-right: auto;
     margin-left: auto;
}
#welcome {
     padding-top: 2%;
     background-color: #f9f9f9;
}
.rounded {
     border-radius: 2rem !important;
}

img {
     padding: 5px;
}

/* ── Shop search bar ── */
.shop-search-form {
    width: 100%;
}
.shop-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 560px;
    margin: 0 auto;
}
.shop-search-icon {
    position: absolute;
    left: 0.9rem;
    color: #6c757d;
    pointer-events: none;
    flex-shrink: 0;
}
.shop-search-input {
    flex: 1;
    padding: 0.6rem 6.5rem 0.6rem 2.5rem;
    border: none;
    border-radius: 2rem;
    font-size: 0.95rem;
    font-family: "Quicksand", sans-serif;
    background: #fff;
    color: #212529;
    outline: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.shop-search-input:focus {
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.shop-search-btn {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 0 1.1rem;
    border: none;
    border-radius: 0 2rem 2rem 0;
    background: #212529;
    color: #fff;
    font-size: 0.85rem;
    font-family: "Quicksand", sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease;
}
.shop-search-btn:hover {
    background: #3d444b;
}
.shop-search-clear {
    position: absolute;
    right: 5.5rem;
    color: #6c757d;
    font-size: 0.8rem;
    text-decoration: none;
    padding: 0.25rem 0.4rem;
    line-height: 1;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
}
.shop-search-clear:hover {
    color: #dc3545;
    background: rgba(220,53,69,0.1);
}

/* ── Wishlist heart button on product cards ── */
.wishlist-form {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 2;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
}
.wishlist-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.50);
    border: none;
    color: rgba(255, 255, 255, 0.80);
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.wishlist-btn:hover {
    background: rgba(220, 53, 69, 0.88);
    color: #fff;
    transform: scale(1.12);
}

/* Product cards */
.product-card {
     background: #343a40;
     border-radius: 0.75rem;
     overflow: hidden;
     box-shadow: 0 2px 8px rgba(0,0,0,0.08);
     transition: box-shadow 0.2s ease, transform 0.2s ease;
     position: relative;
     height: 100%;
     display: flex;
     flex-direction: column;
     font-family: "Quicksand"
}

.product-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.14);
    transform: translateY(-3px);
}

.product-badge {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.4rem;
    letter-spacing: 0.05em;
}

.product-img-wrap {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #fff;
}

.product-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 0;
    transition: transform 0.3s ease;
}

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

.product-info {
    padding: 0.6rem 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-name {
     font-size: 0.82rem;
     font-weight: 600;
     margin-bottom: 0.25rem;
     color: #FFF;
     line-height: 1.3;     
}

.product-rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    margin-bottom: 0.4rem;
    color: #fff;
}

.product-rating .star {
    color: #f5a623;
}

.review-count {
    color: #888;
    font-size: 0.8rem;
}

.product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 0.6rem;
    border-top: 1px solid #f0f0f0;
}

.product-price {
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
}

.product-btn {
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
    border-radius: 0.4rem;
    border: 1.5px solid #1a1a1a;
    color: #fff;
    background: transparent;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

.product-btn:hover {
    background: #1a1a1a;
    color: #fff;
}

.product-btn-blog {
    border-color: #6f42c1;
    color: #c9a7ff;
}
.product-btn-blog:hover {
    background: #6f42c1;
    border-color: #6f42c1;
    color: #fff;
}

/* Category cards */
.category-card {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    cursor: pointer;
}

.category-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    padding: 0;
    transition: transform 0.3s ease;
}

@media (min-width: 576px) {
    .category-card img { height: 220px; }
}

@media (min-width: 992px) {
    .category-card img { height: 260px; }
}

.category-card:hover img {
    transform: scale(1.05);
}

.category-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: white;
    font-family: "Quintessential", serif;
    font-size: 1.4rem;
    text-align: center;
    padding: 1.5rem 1rem 0.75rem;
}

/* Admin area cards — reset the dark card override */
.admin-card {
    max-width: 100%;
    background-color: #fff;
    color: #212529;
    border-radius: 0.5rem !important;
    border: 1px solid rgba(0,0,0,.125);
}

.admin-card .card-body {
    text-align: left;
    font-family: inherit;
    font-size: 1rem;
}

.admin-stat-box {
    transition: transform 0.15s ease;
}

.admin-stat-box:hover {
    transform: translateY(-2px);
}

.quicksand {
     font-family: "Quicksand", sans-serif;
}

.quentessential {
     font-family: "Quentessential", sans-serif;
}
/* ── Blog post share bar ── */
.share-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.share-label {
    font-size: 0.85rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
}
.share-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 2rem;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: "Quicksand", sans-serif;
    text-decoration: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    white-space: nowrap;
    color: #fff;
}
.share-btn:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    color: #fff;
}
.share-btn-pinterest { background: #E60023; }
.share-btn-facebook  { background: #1877F2; }
.share-btn-x         { background: #000; }

/* ── Home page product shelves ── */
.home-shelf-section {
    background: #f0ebe8;
    padding: 3rem 0 3.5rem;
}
.home-shelf-section--alt {
    background: #1e2226;
}
.home-shelf-section--alt .home-shelf-title,
.home-shelf-section--alt .home-shelf-sub {
    color: #fff;
}
.home-shelf-section--alt .home-shelf-link {
    color: #c9a7ff;
}
.home-shelf-section--alt .home-shelf-link:hover {
    color: #fff;
}
.home-shelf-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1.5rem;
}
.home-shelf-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.15rem;
    color: #212529;
}
.home-shelf-sub {
    font-size: 0.9rem;
    color: #6c757d;
    font-family: "Quicksand", sans-serif;
    margin: 0;
}
.home-shelf-link {
    font-size: 0.88rem;
    font-family: "Quicksand", sans-serif;
    font-weight: 600;
    color: #6f42c1;
    text-decoration: none;
    white-space: nowrap;
    padding-bottom: 0.1rem;
}
.home-shelf-link:hover {
    color: #4b2d8a;
}
/* Horizontally scrollable row of cards */
.home-shelf {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(150,10,150,0.25) transparent;
}
.home-shelf::-webkit-scrollbar {
    height: 5px;
}
.home-shelf::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 3px;
}
.home-shelf-card {
    flex: 0 0 210px;
    min-width: 210px;
}
@media (max-width: 576px) {
    .home-shelf-card {
        flex: 0 0 170px;
        min-width: 170px;
    }
}

/* ── YouTube embed on blog posts ── */
.yt-embed-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    border-radius: 0.5rem;
    overflow: hidden;
    background: #000;
}
.yt-embed-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ── YouTube Tools admin page ── */
.yt-product-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 420px;
    overflow-y: auto;
    color: #000;
}
.yt-product-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.5rem;
    border-radius: 0.4rem;
    background: #f8f9fa;
}
.yt-product-row:hover {
    background: #e9ecef;
}
.yt-product-thumb {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 0.25rem;
    flex-shrink: 0;
    padding: 0;
}

/* YouTube Tools — stock term chips */
.yt-terms-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.25rem 0.25rem 0.5rem;
}
.yt-term-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 999px;
    padding: 0.2rem 0.55rem 0.2rem 0.65rem;
    max-width: 320px;
    min-width: 0;
}
.yt-term-link {
    font-size: 0.78rem;
    color: #198754;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}
.yt-term-link:hover {
    text-decoration: underline;
    color: #0f5132;
}
.yt-term-badge {
    font-size: 0.65rem;
    flex-shrink: 0;
    border-radius: 999px;
    padding: 0.15em 0.5em;
}

/* Blog cards */
.blog-card {
    background: #fff;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
}
.blog-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.14); transform: translateY(-3px); }
.blog-card-img { width:100%; aspect-ratio:16/9; overflow:hidden; }
.blog-card-img img { width:100%; height:100%; object-fit:cover; display:block; padding:0; transition:transform 0.3s ease; }
.blog-card:hover .blog-card-img img { transform: scale(1.04); }
.blog-card-body { padding:1.25rem; display:flex; flex-direction:column; flex:1; }
.blog-card-date { margin-bottom:0.35rem; }
.blog-card-title { font-size:1rem; font-weight:700; color:#1a1a1a; margin-bottom:0.5rem; line-height:1.4; }
.blog-card-excerpt { font-size:0.88rem; line-height:1.6; flex:1; font-family: 'quicksand'; }
.blog-read-more { font-size:0.82rem; font-weight:600; color:#343a40; margin-top:0.75rem; display:block; }

/* Blog post content */
.blog-content { font-size:1.05rem; line-height:1.85; color:#2c2c2c; font-family: 'quicksand' }
.blog-content h1,.blog-content h2,.blog-content h3 { margin-top:2rem; margin-bottom:0.75rem; font-weight:700; font-family: Quintessential; }
.blog-content img { max-width:100%; border-radius:0.5rem; margin:1rem 0; padding:0; }
.blog-content a { color:#0d6efd; text-decoration:underline; }
.blog-content blockquote { border-left:4px solid #343a40; padding-left:1.25rem; margin-left:0; color:#555; font-style:italic; }