/** CUSTOM CSS FOR /PORTAL PAGES **/

@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i');

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Colours
2.0 Dashboard
3.0 Guest List
4.0 Table Planner
5.0 Timeline

99.0 Misc

Media Queries
--------------------------------------------------------------*/

:root {
    --bs-primary:#534944;
    --bs-primary-rgb:83, 73, 68;
    --bs-secondary:#a9a4a1;
    --bs-secondary-rgb:169, 164, 161;
    --bs-tertiary:#66ab9c;
    --bs-tertiary-rgb:102, 171, 156;
    --heart-fill: 0;
    --balance-fill: 0;
    --bs-danger: #d9534f;
}

/*--------------------------------------------------------------
1.0 Colours
--------------------------------------------------------------*/

.btn-primary { background-color:var(--bs-primary); border-color:var(--bs-primary); text-transform:uppercase;}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus { background-color:var(--bs-primary); border-colorvar(--bs-primary); box-shadow:inset 0 0 0 1000px rgba(0,0,0,.1);}
.btn-secondary { background-color:var(--bs-secondary); border-color:var(--bs-secondary); text-transform:uppercase; color:#fff;}
.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus { background-color:var(--bs-secondary); border-color:var(--bs-secondary); box-shadow:inset 0 0 0 1000px rgba(0,0,0,.1);}
.btn-tertiary { background-color:var(--bs-tertiary); border-color:var(--bs-tertiary); text-transform:uppercase; color:#fff;}
.btn-tertiary:hover, .btn-tertiary:active, .btn-tertiary:focus { background-color:var(--bs-tertiary); color:#fff; border-color:var(--bs-tertiary); box-shadow:inset 0 0 0 1000px rgba(0,0,0,.2);}
.btn-guest { background-color:#fff; border-color:#ccc; text-transform:uppercase; color:#3a3a3a;}
.btn-guest:hover, .btn-guest:active, .btn-guest:focus { background-color:#66ab9c5c; border-color:#adadad; color:#fff; box-shadow:inset 0 0 0 1000px rgba(0,0,0,.2);}

.border-primary { border-color:var(--bs-primary)!important; }
.border-secondary { border-color:var(--bs-secondary)!important; }

.text-tertiary { color:var(--bs-tertiary); }
.bg-tertiary { background-color:var(--bs-tertiary); color:#fff; }

body { padding-top:100px; background-color:#f4f2f1; color:var(--bs-primary); }

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { font-family: 'Playfair Display', serif; color:var(--bs-primary); text-transform:uppercase; }

.navbar { height:100px; border-bottom:1px solid var(--bs-primary); }
.navbar-brand {margin: 0; color: var(--bs-primary); font-size: 1.5rem; font-family: 'Playfair Display', serif!important; }
.nav-item { margin-right:0.7rem;}

footer { height:100px; background-color:#fff; }

.form-label .required { color:var(--bs-danger); }
.form-check-input:checked { background-color:var(--bs-tertiary);border-color:var(--bs-tertiary); }
.form-check-input:focus { box-shadow: 0 0 0 0.25rem rgba(var(--bs-tertiary-rgb),0.25); border-color:var(--bs-tertiary); }
.form-check-input { border:1px solid #adb5bd; }

i.fa-solid.fa-circle-xmark { color:var(--bs-danger); }
i.fa-solid.fa-circle-check { color:var(--bs-tertiary); }

/* Tooltip box */
.tooltip-inner {padding: 6px 10px;background-color: var(--bs-tertiary);color: #ffffff;font-size: 0.8rem; font-weight: 500;border-radius: 6px;max-width: 200px;text-align: center;line-height: 1.3; }
/* Tooltip arrow */
.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {border-top-color: var(--bs-tertiary);}

/*--------------------------------------------------------------
2.0 Dashboard
--------------------------------------------------------------*/

.heart-mask-container .countdown{ z-index:888; }
.heart-mask-container h2 { font-family: 'PT Sans', sans-serif; z-index: 1; color: #ffffff; font-weight: 700; font-size: 20px; line-height: 24px; text-transform: uppercase; text-align: center; }
.heart-mask-container h2 .large { font-size: 48px; }
.heart-mask-container{ position: relative;height:0;padding-bottom:100%;width:100%;  }
.heart-mask-container img{ position: absolute; max-width:100%; }
.heart-bg-container{ padding:3px;position: absolute;height: 100%;width: 100%;overflow:hidden; }
.heart-mask-bg{ background-color:#534944;width:100%;height:100%;}
.heart-mask-fill{
    background-color:#e1564b;width:100%;height:100%; position: relative; bottom:0;
    animation: heart-fill linear 2s forwards;
    animation-iteration-count: 1;
    -webkit-animation: heart-fill linear 2s forwards;
    -webkit-animation-iteration-count: 1;
    -ms-animation: heart-fill linear 2s forwards;
    -ms-animation-iteration-count: 1;
}

@keyframes heart-fill { 100% { bottom: var(--heart-fill); } }
@-webkit-keyframes heart-fill { 100% { bottom: var(--heart-fill); } }
/* heart end */

#remaining-balance-bar {
    width:0; background-color:#e19d4b;
    animation: balance-fill linear 2s forwards;
    animation-iteration-count: 1;
    -webkit-animation: balance-fill linear 2s forwards;
    -webkit-animation-iteration-count: 1;
    -ms-animation: balance-fill linear 2s forwards;
    -ms-animation-iteration-count: 1;
}

@keyframes balance-fill { 100% { width: var(--balance-fill); } }
@-webkit-keyframes balance-fill { 100% { width: var(--balance-fill); } }

.progress-wrapper { width: 100%; height: auto; position:relative; margin-bottom:1rem; }
.progress-wrapper div { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1; text-transform: uppercase;  }
.progress-wrapper div p { font-size:2.0rem; font-weight:700; margin-bottom:0; line-height:0.9; }
.progress-wrapper div span { font-size:1.3rem; font-weight:400; }
.circle-path { width: 100%; height: 100%; }
.circle-bg { fill: none;stroke: #eee;stroke-width: 12; }
.circle-progress {
    fill: none;stroke: #e09d4a;stroke-width: 20;stroke-linecap: round;
    transition: stroke-dashoffset 2s ease;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    stroke-dasharray: 100; /* start empty */
    stroke-dashoffset: 100;/* start empty */
}
#circle3 { stroke:#66ab9c; }
#circle4 { stroke:#e0554a; }

.timeline-wrapper { position:relative; padding:0.5rem; font-size:0.8rem; margin-bottom:0.5rem; border:1px solid #e0e5ec; border-radius:0.25rem; }
.timeline-wrapper.completed { color:#a7aeb8!important; }
.timeline-wrapper:not(.completed) { border:1px solid #b3b7bc; }
.timeline-wrapper.completed .fa-circle-check { display:inline-block; }
.timeline-wrapper.completed .fa-circle-xmark { display:none; }
.timeline-wrapper:not(.completed) .fa-circle-check { display:none; }
.timeline-wrapper:not(.completed) .fa-circle-xmark { display:inline-block; }
.timeline-wrapper:hover { color:var(--bs-primary)!important; border:1px solid #b3b7bc; box-shadow: 2px 2px 10px #b3b7bc; }
.timeline-wrapper .timeline-heading { margin-bottom:0; font-weight:600; }

/*--------------------------------------------------------------
3.0 Guest List
--------------------------------------------------------------*/

.guest-status h5 { font-weight:600; font-family: "PT Sans", sans-serif; font-size:1rem; margin-bottom:1rem; }

.guest-success { background-color:#dff0d8; }
.guest-warning { background-color:#fcf8e3; }
.guest-danger { background-color: #f2dede; }

/*--------------------------------------------------------------
4.0 Table Planner
--------------------------------------------------------------*/

.col-xs-6 { width:50%; }
.seated { color:var(--bs-tertiary); opacity:0.5; font-weight:500; }
.not-seated { color:var(--bs-tertiary); font-weight: 500; }

.table-select-container { position:relative; display:flex; text-align: center; align-items: center; justify-content: center; }
.table-select-container:nth-child(3n+3) { margin-top: -30px; margin-bottom: -30px; width: 100%; }
.head-table, .guest-table, .head-table-plan, .guest-table-plan { display:flex; align-items: center; justify-content: center; background-color:#f4f3f1; font-size:1.3rem; font-family: 'Playfair Display', serif!important; transition: all 0.4s ease;}
.head-table { border-radius:0.35rem; }
.guest-table {width: 160px;height: 160px;border-radius: 50%; }
.guest-table-plan { position:relative; width: 250px;height: 250px;border-radius: 50%; }
.guest-table-plan .edit-btn { right:0; cursor:pointer;  }
.head-table:hover, .guest-table:hover, .head-table.selected, .guest-table.selected { background-color: var(--bs-tertiary); color:#fff; cursor: pointer; }

.seat-count { position:absolute; top:calc(100% - 20px); background-color:#e1564b; color:#fff; display:inline-flex; align-items: center; justify-content: center; border-radius:50%; font-size:0.9rem; width:40px; height:40px; line-height:1; font-weight:700; font-family: 'PT Sans', sans-serif;}

.head-table-plan-container .seat { margin-left:3px; margin-right:3px; }
.seat { padding: 0;border:0; width:45px; height:45px; font-size:calc(1.2rem + 1.5vw); background-color:#f4f3f1; color:#d1d1d1; border-radius:50%; display:flex; align-items: center; justify-content: center; }
.seat i { display:block; line-height:1; transform: translate(0.5px, 0.5px);}

.head-table-plan-container, .guest-table-plan-container { min-height:360px;  display:flex; flex-direction:column;  align-items: center;  }
.table-seat-ring { position: absolute; pointer-events: none;  }

/* Style the seat button */
.table-seat-ring .seat-wrapper {
    position: absolute; cursor: pointer; left: 50%; top: 50%; line-height: 1; pointer-events: auto; z-index:111;
    transform:
            translate(-50%, -50%)
            rotate(calc((360deg / var(--seats)) * var(--i)))
            translateY(-160px)               /* radius: distances from centre point */
            rotate(calc((-360deg / var(--seats)) * var(--i))); /* keeps icon upright */
}

.table-seat-ring .seat i { transform: translate(1.5px, 0.5px); overflow:visible; }

/* an empty seat is selected */
.seat.is-active, .seat-wrapper.is-selected .seat { border: 3px solid var(--bs-tertiary); box-shadow: 0 0 0 6px rgba(var(--bs-tertiary-rgb),.15); }
.seat.is-active i.fa-plus { display:none; color:var(--bs-tertiary); }
.seat.is-active  { color:var(--bs-tertiary); }
.seat:not(.is-active) i.fa-minus { display:none;}

/* When a seat is selected, highlight the guest list wrapper (visible on desktop only) */
#desktopGuestListWrapper.awaiting-selection { box-shadow: 0 0 0 3px rgba(13,110,253,.2); animation: pulseGlow 1.5s ease-out infinite; }
#desktopGuestListWrapper.awaiting-selection tr:not(.seated) { cursor: pointer; }
#desktopGuestListWrapper.awaiting-selection tr.seated { cursor: not-allowed; }

/* an occupied seat */
.seat-occupied-btn { background-color:var(--bs-tertiary); color:#fff; font-size:1.2rem; font-family: 'Playfair Display', serif!important; }

/* an occupied seat is selected */
.seat-wrapper.is-selected { z-index: 9999; }
.seat-wrapper.is-selected .seat-actions, .seat-wrapper.is-selected .seat-occupant { display:flex; }
.seat-actions, .seat-occupant  { position: absolute;left: 50%;transform: translateX(-50%);display: none;gap: .4rem;padding: .4rem .5rem;border-radius: 8px;box-shadow: 0 8px 20px rgba(0,0,0,.15); z-index: 22222; animation: seatPop .25s ease-out; }
.seat-actions { top: 110%; background: #fff; }
.seat-occupant { top: -110%; text-wrap: nowrap; background: var(--bs-tertiary); color:#fff; font-size: 1.2rem; font-family: 'Playfair Display', serif !important;box-shadow: 0 0 0 2px #fff, 0 6px 18px rgba(0,0,0,.18);}
.seat-occupant::before {content: "";position: absolute;top: 100%;left: 50%;transform: translateX(-50%);border-left: 9px solid transparent;border-right: 9px solid transparent;border-top: 9px solid #fff;}
.seat-occupant::after { content: "";position: absolute; top: 100%; left: 50%;transform: translateX(-50%);width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 6px solid var(--bs-tertiary); }

@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(var(--bs-tertiary-rgb),.53); }
    100% { box-shadow: 0 0 0 10px rgba(var(--bs-tertiary-rgb),0); }
}


@keyframes seatPop {
    from { transform: translateX(-50%) scale(.95); opacity: 0; }
    to   { transform: translateX(-50%) scale(1);   opacity: 1; }
}

/*--------------------------------------------------------------
5.0 Timeline
--------------------------------------------------------------*/

.anchor-offset { scroll-margin-top:110px; }
.save-feedback { color:var(--bs-tertiary); opacity: 1;  }
.save-feedback.fade-out { opacity: 0; transition: opacity 5s ease; }
.error-border { border-color:var(--bs-danger)!important; }

/*--------------------------------------------------------------
99.0 Misc
--------------------------------------------------------------*/

#backToTop { position:fixed; bottom:15px; right:15px; z-index:9999;}
body.no-navbar { padding-top:0; }
body:not(.no-navbar) #layoutAuthentication { min-height:calc(100vh - 100px); }
#layoutAuthentication { min-height:calc(100vh); }
body:not(.no-navbar) #layoutAuthentication #layoutAuthentication_content { min-height:calc(90vh - 100px); }
#layoutAuthentication #layoutAuthentication_content { min-height:90vh; }
#layoutAuthentication #layoutAuthentication_footer { min-height:10vh; }
.footer-admin { min-height:10vh; }

@media (max-width: 767px) {
    /*--------------------------------------------------------------
    4.0 Table Planner
    --------------------------------------------------------------*/
    .table-select-container { padding:15px; }
    .guest-table { width: 100px; height: 100px; }
    .guest-table, .head-table-plan, .guest-table-plan { font-size:1rem; }
    .seat-count { top:calc(100% - 40px) }
    .seat i { font-size:calc(1.5rem + 1.5vw); }
    .seat-row .seat-wrapper:nth-child(1n) { margin-top:-15px;}
    .seat-row .seat-wrapper:nth-child(2n+2) { margin-top:25px;}
    .seat-row .seat-wrapper:nth-child(1n) .seat-occupant { top:-60%; }
    .seat-row .seat-wrapper:nth-child(1n) .seat-actions { top:50%; }
    .seat-row .seat-wrapper:nth-child(2n+2) .seat-occupant { top:-110%; }
    .seat-row .seat-wrapper:nth-child(2n+2) .seat-actions { top:100%; }
    .head-table-plan-container .seat { width:40px; height:40px; margin-left:-6px; margin-right:-6px; -webkit-overflow-scrolling: touch; }
    .head-table-plan-container { min-height:300px; }
    .guest-table-plan { width: 150px;height: 150px; }
    .guest-table-plan .edit-btn { right:-10%; }
    .table-seat-ring .seat-wrapper { transform:
            translate(-50%, -50%)
            rotate(calc((360deg / var(--seats)) * var(--i)))
            translateY(-130px)               /* radius: tweak this */
            rotate(calc((-360deg / var(--seats)) * var(--i))); /* keeps icon upright */}
}

@media (max-width: 480px) {
    /*--------------------------------------------------------------
    4.0 Table Planner
    --------------------------------------------------------------*/
    .guest-table { width: 80px; height: 80px; font-size: 14px; line-height: 20px; padding: 5px; }
}