/* =====================================
   POTTY TRAINING GENERATOR
   MomYouNeedThis
===================================== */


/* =====================================
   BASE
===================================== */


.potty-container {

max-width:1100px;
margin:auto;
padding:0 20px;

}



.potty-generator {

padding:40px 0;

}



.potty-generator .potty-container {

display:grid;

grid-template-columns:minmax(0,1fr) minmax(0,1fr);

gap:35px;

align-items:start;

}








/* =====================================
   CARDS
===================================== */


.potty-form-card,
.potty-preview-wrapper {

background:white;

padding:35px;

border-radius:28px;

box-shadow:
0 12px 35px rgba(0,0,0,.08);

box-sizing:border-box;

width:100%;

min-width:0;

overflow:hidden;

}



.potty-form-card h2,
.potty-preview-wrapper h2 {

font-size:28px;

font-weight:900;

margin-top:0;

}









/* =====================================
   FORM
===================================== */


.potty-form-card label {

display:block;

font-weight:900;

margin-top:20px;

margin-bottom:8px;

}



.potty-form-card input,
.potty-form-card select,
.potty-modal input {


width:100%;

padding:14px;

border-radius:14px;

border:1px solid #ddd;

font-family:inherit;

font-size:16px;

box-sizing:border-box;

}







/* COLORS */


.potty-colors {

display:flex;

gap:12px;

margin-top:10px;

}



.color-choice {

width:42px;

height:42px;

border-radius:50%;

border:none;

cursor:pointer;

transition:.2s;

}



.color-choice:hover {

transform:scale(1.15);

}



.pink {

background:#ffd6e8;

}


.purple {

background:#e7d9ff;

}


.blue {

background:#d8efff;

}


.green {

background:#d9f7dc;

}









/* =====================================
 BUTTON
===================================== */


.download-button {

width:100%;

margin-top:25px;

padding:16px;

border-radius:50px;

border:none;

background:#ff6fae;

color:white;

font-size:18px;

font-weight:900;

cursor:pointer;

transition:.2s;


/* Center text */
display:flex;
align-items:center;
justify-content:center;
text-align:center;

}


.download-button:hover {

transform:translateY(-2px);

}








/* =====================================
 PREVIEW
===================================== */


.potty-preview {

position:relative;

padding:30px;

border-radius:35px;

border:5px solid;

text-align:center;

overflow:hidden;

width:100%;

box-sizing:border-box;

min-height:520px;

transition:.3s;

}


.chart-icon {

font-size:60px;

position:relative;

z-index:2;

}



.potty-preview h3 {

font-size:30px;

font-weight:900;

line-height:1.2;

margin:15px 0;

}


.potty-preview p {

font-size:16px;

}








/* =====================================
 POTTY TABLE
===================================== */

.chart-scroll {
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    background:white;
    border-radius:20px;
}


.potty-chart-table {

border-collapse:separate;

border-spacing:5px;

width:max-content;

max-width:none;

}


.potty-chart-table th{

padding:14px 12px;

border-radius:16px;

font-size:17px;

font-weight:900;

white-space:nowrap;

min-width:72px;

color:#444;

border:2px solid rgba(255,255,255,.6);

box-shadow:0 3px 10px rgba(0,0,0,.05);

}


.potty-chart-table td{

background:rgba(255,255,255,0.75);

backdrop-filter:blur(3px);

padding:14px;

border-radius:14px;

text-align:center;

min-width:72px;

}

.empty-cell {

background:transparent!important;

}


.activity-label{

font-weight:900;

text-align:left!important;

white-space:nowrap;

min-width:90px;

font-size:17px;

}


.reward-circle{

width:46px;

height:46px;

border-radius:50%;

border:3px dashed #ddd;

background:#fffaf0;

margin:auto;

}



/* =====================================
 THEMES
===================================== */


.theme-princess {

background:
url("assets/princess-potty-chart-reward.png.jpeg");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

border-color:#ff9fc9;

}


.theme-princess h3 {

color:#ff5f9e;

}



.theme-dinosaur {

background:
url("assets/dinosaurs-potty-chart-reward.png.jpeg");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

border-color:#8bd66a;

}


.theme-dinosaur h3 {

color:#4c9c38;

}



.theme-unicorn {

background:
url("assets/unicorn-potty-chart-reward.png.jpeg");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

border-color:#d59cff;

}


.theme-unicorn h3 {

color:#a34ee8;

}



.theme-space {

background:
url("assets/space-potty-chart-reward.png.jpeg");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

border-color:#8aa9ff;

}


.theme-space h3 {

color:#4169e1;

}



.theme-animals {

background:
url("assets/animal-potty-chart-reward.png.jpeg");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

border-color:#ffc85c;

}


.theme-animals h3 {

color:#e89b00;

}



/* ===========================
   DAY HEADER COLORS
=========================== */

.theme-princess .potty-chart-table th{

background:#ffd9ea;

color:#d94b86;

}

.theme-dinosaur .potty-chart-table th{

background:#daf5c8;

color:#4c9c38;

}

.theme-unicorn .potty-chart-table th{

background:#ecd8ff;

color:#9147d8;

}

.theme-space .potty-chart-table th{

background:#dbe7ff;

color:#4169e1;

}

.theme-animals .potty-chart-table th{

background:#fff1c6;

color:#d18d00;

}


.empty-cell{

background:transparent !important;

border:none !important;

box-shadow:none !important;

}


/* =====================================
   REWARD BOX
===================================== */

.reward-box{
background:rgba(255,255,255,0.78);

backdrop-filter:blur(4px);

padding:22px;

margin-top:25px;

border-radius:22px;

box-shadow:0 5px 15px rgba(0,0,0,.08);

text-align:left;

}

/* =====================================
   REWARD BOX THEME COLORS
===================================== */

.reward-box h4{

margin:0 0 18px;

font-size:22px;

font-weight:900;

text-align:center;

}


/* Princess */

.theme-princess .reward-box h4{

color:#ff5f9e;

}


/* Dinosaur */

.theme-dinosaur .reward-box h4{

color:#4c9c38;

}


/* Unicorn */

.theme-unicorn .reward-box h4{

color:#a34ee8;

}


/* Space */

.theme-space .reward-box h4{

color:#4169e1;

}


/* Animals */

.theme-animals .reward-box h4{

color:#e89b00;

}

.reward-write-line{

height:50px;

border-bottom:3px solid #cfcfcf;

margin-bottom:10px;

}

.reward-note{

margin:0;

font-size:14px;

color:#777;

text-align:center;

font-style:italic;

}






.reward-stars {


display:flex;

justify-content:center;

gap:12px;

margin-top:15px;

}


.reward-stars span {


width:40px;

height:40px;

border-radius:50%;

border:3px dashed #ffc85c;

background:#fffaf0;

}


.footer-message {


margin-top:25px;

font-size:18px;

font-weight:900;

}


/* =====================================
 EMAIL MODAL
===================================== */


.potty-modal {

display:none;

position:fixed;

inset:0;

background:rgba(0,0,0,.45);

align-items:center;

justify-content:center;

z-index:999;

padding:20px;

}


.potty-modal-content {

background:white;

padding:40px 30px;

width:100%;

max-width:450px;

border-radius:28px;

text-align:center;

box-sizing:border-box;

position:relative;

}


.potty-modal-content h2 {

font-size:26px;

font-weight:900;

margin-top:10px;

text-align:center;

}


.potty-modal-content p {

text-align:center;

line-height:1.5;

}


.potty-modal input {

width:100%;

padding:15px;

border-radius:14px;

border:1px solid #ddd;

font-family:inherit;

font-size:16px;

box-sizing:border-box;

margin-top:15px;

}


.potty-close {

position:absolute;

top:15px;

right:15px;

width:36px;

height:36px;

border-radius:50%;

border:none;

background:#ff6fae;

color:white;

font-size:24px;

font-weight:900;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

padding:0;

line-height:1;

}


.potty-close:hover {

transform:scale(1.1);

}


/* =====================================
 BENEFITS
===================================== */


.potty-benefit-grid {


display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

}


.potty-benefit-grid div {


background:white;

padding:25px;

border-radius:20px;

box-shadow:
0 5px 20px rgba(0,0,0,.06);

}


/* =====================================
 MOBILE
===================================== */


@media(max-width:850px){


.potty-generator .potty-container {

grid-template-columns:1fr;

gap:25px;

}



.potty-form-card,
.potty-preview-wrapper {

padding:20px;

}



.potty-preview {
padding:20px;

}



.potty-benefit-grid {

grid-template-columns:1fr 1fr;

}


}



@media(max-width:500px){


.potty-container {

padding:0 12px;

}



.potty-form-card,
.potty-preview-wrapper {

border-radius:20px;

}



.potty-preview-wrapper h2 {

font-size:22px;

}



.chart-icon {

font-size:45px;

}



#chartTitle {

font-size:22px;

}



#chartSubtitle {

font-size:14px;
margin-bottom: 25px; 
line-height:1.5;
}



.potty-chart-table th,
.potty-chart-table td{

padding:8px;

font-size:14px;

min-width:56px;

}


.reward-circle{

width:46px;

height:46px;

border-radius:50%;

border:3px dashed #d7d7d7;

background:#ffffff;

margin:auto;

transition:.2s;

box-shadow:inset 0 2px 4px rgba(0,0,0,.04);

}


.activity-label{

font-weight:900;

text-align:left !important;

white-space:nowrap;

min-width:90px;

font-size:17px;

padding-left:10px !important;

color:#444;

background:#ffffff !important;

}

.week-title{

font-size:20px;

font-weight:900;

margin:0 0 15px;

text-align:left;

}


/* Match theme */

.theme-princess .week-title{
color:#ff5f9e;
}

.theme-dinosaur .week-title{
color:#4c9c38;
}

.theme-unicorn .week-title{
color:#a34ee8;
}

.theme-space .week-title{
color:#4169e1;
}

.theme-animals .week-title{
color:#e89b00;
}



.potty-benefit-grid {

grid-template-columns:1fr;

}


}



/* ===========================
   WEEKLY CHART SECTIONS
=========================== */


.potty-week-container {

display:flex;
background: white;
width:100%;
flex-direction:column;

gap:25px;

}


.potty-week {

    background:white;
    padding:15px;
    border-radius:20px;
    width:100%;
    box-sizing:border-box;

}

.week-title{

display:block;

margin:0 0 18px 90px;

font-size:22px;

font-weight:900;

color:#ff6fae;

text-align:left;

}