/* =============================================
   Plant Identifier - Pl@ntNet API Version
   Mobile First Design - Clean (No API key UI)
   ============================================= */

.plant-container { max-width: 960px; margin: 0 auto; padding: 20px; }

.plant-body {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* ---- Input Methods ---- */
.input-methods {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 12px;
}

.method-btn {
    padding: 18px 15px;
    background: white;
    border: 3px solid #e2e8f0;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.method-btn span   { font-size: 30px; }
.method-btn strong { display:block; color:#1e293b; font-size:15px; }
.method-btn small  { color:#64748b; font-size:12px; }

.method-btn:hover { border-color:#10b981; background:#f0fdf4; }
.method-btn.active {
    border-color: #10b981;
    background: linear-gradient(135deg,#dcfce7 0%,#bbf7d0 100%);
}

/* ---- Organ Selector ---- */
.organ-selector label {
    display: block;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
    font-size: 15px;
}

.organ-btns { display:flex; flex-wrap:wrap; gap:10px; }

.organ-btn {
    padding: 9px 18px;
    background: #f1f5f9;
    border: 2px solid #e2e8f0;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.3s;
}

.organ-btn:hover { border-color:#10b981; background:#f0fdf4; color:#166534; }
.organ-btn.active {
    background: linear-gradient(135deg,#10b981 0%,#059669 100%);
    color: white;
    border-color: #10b981;
}

/* ---- Camera ---- */
.camera-view {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto 16px;
    background: #0f172a;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4/3;
}

#plantCamera { width:100%; height:100%; object-fit:cover; display:block; }

.camera-guide { position:absolute; inset:0; pointer-events:none; }

.guide-corner {
    position: absolute;
    width: 30px;
    height: 30px;
    border-color: rgba(255,255,255,0.8);
    border-style: solid;
}

.guide-corner.tl { top:20px; left:20px;   border-width:3px 0 0 3px; border-radius:4px 0 0 0; }
.guide-corner.tr { top:20px; right:20px;  border-width:3px 3px 0 0; border-radius:0 4px 0 0; }
.guide-corner.bl { bottom:20px; left:20px;  border-width:0 0 3px 3px; border-radius:0 0 0 4px; }
.guide-corner.br { bottom:20px; right:20px; border-width:0 3px 3px 0; border-radius:0 0 4px 0; }

.camera-btns { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }

.cam-btn {
    padding: 11px 22px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    transition: all 0.3s;
}

.cam-btn:hover { background:#f1f5f9; border-color:#10b981; }
.cam-btn.primary {
    background: linear-gradient(135deg,#10b981 0%,#059669 100%);
    color: white;
    border-color: #10b981;
}
.cam-btn.primary:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(16,185,129,0.35); }

/* ---- Upload Zone ---- */
.upload-zone {
    border: 3px dashed #86efac;
    border-radius: 16px;
    padding: 50px 20px;
    text-align: center;
    background: linear-gradient(135deg,#f0fdf4 0%,#dcfce7 100%);
    cursor: pointer;
    transition: all 0.3s;
}

.upload-zone:hover, .upload-zone.dragover {
    border-color: #10b981;
    background: linear-gradient(135deg,#dcfce7 0%,#bbf7d0 100%);
    transform: scale(1.01);
}

.upload-plant-icon { font-size:60px; margin-bottom:15px; }
.upload-zone h3    { color:#166534; font-size:20px; margin-bottom:8px; }
.upload-zone p     { color:#15803d; margin-bottom:6px; font-size:14px; }
.upload-hint       { font-size:12px !important; color:#4ade80 !important; margin-bottom:20px !important; }

.upload-browse-btn {
    padding: 11px 28px;
    background: linear-gradient(135deg,#10b981 0%,#059669 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
}
.upload-browse-btn:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(16,185,129,0.3); }

/* ---- Results ---- */
.results-section {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 20px;
    animation: fadeIn 0.4s;
}

@keyframes fadeIn {
    from { opacity:0; transform:translateY(16px); }
    to   { opacity:1; transform:translateY(0); }
}

.result-image-box { text-align:center; }

.result-image-box img {
    width: 100%;
    max-height: 350px;
    object-fit: contain;
    border-radius: 14px;
    border: 3px solid #bbf7d0;
    background: #f0fdf4;
}

.retry-btn {
    margin-top: 12px;
    padding: 9px 20px;
    background: #f1f5f9;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    transition: all 0.3s;
    width: 100%;
}
.retry-btn:hover { background:#e2e8f0; border-color:#10b981; color:#166534; }

.result-content {
    background: linear-gradient(135deg,#f0fdf4 0%,#dcfce7 100%);
    border-radius: 16px;
    padding: 22px;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Loading ---- */
.loading-state { text-align:center; width:100%; }

.plant-loader { display:flex; justify-content:center; gap:8px; margin-bottom:18px; }

.leaf { font-size:30px; animation:bounce 0.8s infinite alternate; }
.leaf1 { animation-delay:0s; }
.leaf2 { animation-delay:0.2s; }
.leaf3 { animation-delay:0.4s; }

@keyframes bounce {
    from { transform:translateY(0); }
    to   { transform:translateY(-12px); }
}

.loading-state p     { color:#166534; font-size:17px; font-weight:700; margin-bottom:6px; }
.loading-state small { color:#15803d; font-size:13px; }

/* ---- Plant Result ---- */
.plant-result { width:100%; animation:fadeIn 0.5s; }

.result-header {
    text-align: center;
    padding-bottom: 18px;
    border-bottom: 2px solid #bbf7d0;
    margin-bottom: 18px;
}

.result-common-name { font-size:24px; font-weight:800; color:#166534; margin-bottom:4px; }
.result-scientific  { font-style:italic; color:#15803d; font-size:15px; margin-bottom:12px; }

.confidence-bar-wrap { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.confidence-bar-wrap label { font-size:12px; color:#166534; font-weight:600; white-space:nowrap; min-width:85px; }

.confidence-bar { flex:1; height:10px; background:#bbf7d0; border-radius:5px; overflow:hidden; }
.confidence-fill { height:100%; border-radius:5px; background:linear-gradient(90deg,#10b981,#059669); transition:width 1s ease; }
.confidence-pct  { font-size:13px; font-weight:800; color:#059669; min-width:38px; text-align:right; }

.result-badges { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:10px; }
.badge { padding:4px 14px; border-radius:20px; font-size:12px; font-weight:700; }
.badge.family { background:#dbeafe; color:#1e40af; }
.badge.genus  { background:#fef3c7; color:#92400e; }

.result-details { display:flex; flex-direction:column; gap:10px; }

.detail-row {
    background: white;
    border-radius: 10px;
    padding: 12px 15px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.detail-label { font-size:13px; font-weight:700; color:#166534; min-width:90px; flex-shrink:0; }
.detail-value { font-size:13px; color:#1e293b; line-height:1.5; }

.more-matches { margin-top:14px; background:white; border-radius:12px; padding:14px; }
.more-matches h5 { color:#166534; font-size:14px; margin-bottom:10px; }

.match-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #f0fdf4;
    font-size: 13px;
}
.match-item:last-child { border:none; }
.match-name { color:#1e293b; font-weight:600; }
.match-sci  { color:#64748b; font-style:italic; font-size:12px; }
.match-pct  { color:#10b981; font-weight:700; font-size:13px; }

/* ---- Error State ---- */
.error-state { width:100%; animation:fadeIn 0.5s; }

.error-box { text-align:center; padding:20px; }
.error-emoji { font-size:52px; margin-bottom:14px; display:block; }
.error-box h4 { color:#dc2626; font-size:20px; margin-bottom:10px; }

.error-msg-box {
    background: #fee2e2;
    border: 2px solid #fca5a5;
    border-radius: 10px;
    padding: 12px 15px;
    color: #7f1d1d;
    font-size: 14px;
    margin-bottom: 14px;
    text-align: left;
}

.error-tip-box {
    background: #fef3c7;
    border: 2px solid #fde68a;
    border-radius: 10px;
    padding: 12px 15px;
    color: #78350f;
    font-size: 13px;
    text-align: left;
}

.error-tip-box strong { display:block; margin-bottom:6px; }

.valid-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.valid-chips span {
    background: #dcfce7;
    color: #166534;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: 1.5px solid #86efac;
}

/* ---- Info Grid ---- */
.info-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }

.info-card { padding:22px; border-radius:14px; }
.info-card.green  { background:linear-gradient(135deg,#f0fdf4 0%,#dcfce7 100%); }
.info-card.blue   { background:linear-gradient(135deg,#f0f9ff 0%,#e0f2fe 100%); }
.info-card.yellow { background:linear-gradient(135deg,#fffbeb 0%,#fef3c7 100%); }

.info-card h4 { font-size:16px; margin-bottom:14px; }
.info-card.green  h4 { color:#166534; }
.info-card.blue   h4 { color:#0c4a6e; }
.info-card.yellow h4 { color:#92400e; }

.info-card ol, .info-card ul { padding-left:18px; line-height:1.9; font-size:13px; }
.info-card.green  li { color:#15803d; }
.info-card.blue   li { color:#0369a1; }
.info-card.yellow li { color:#78350f; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 768px) {
    .plant-body { padding:20px 15px; gap:20px; }
    .results-section { grid-template-columns:1fr; }
    .result-content { min-height:200px; }
    .camera-view { aspect-ratio:3/4; }
    .cam-btn { flex:1; min-width:110px; justify-content:center; }
    .info-grid { grid-template-columns:1fr; }
    .result-common-name { font-size:20px; }
}

@media (max-width: 480px) {
    .plant-container { padding:10px 5px; }
    .plant-body { padding:15px 10px; }
    .organ-btn { padding:7px 10px; font-size:12px; }
    .upload-zone { padding:35px 15px; }
    .upload-plant-icon { font-size:48px; }
}